@import "../../scss/includes/_component";

:host {
  display: flex;
}

.handle {
  display: flex;
  align-items: center;
  align-self: stretch;
  justify-content: center;
  padding: var(--calcite-app-cap-spacing-three-quarters) var(--calcite-app-side-spacing-quarter);
  background-color: var(--calcite-app-background);
  background-color: transparent;
  border: none;
  color: var(--calcite-app-border);
  line-height: 0;
  cursor: move;
  &:hover {
    background-color: var(--calcite-app-background-hover);
    color: var(--calcite-app-foreground);
  }
  @include focus-style-base();
  &:focus {
    color: var(--calcite-app-foreground);
    @include focus-style-inset();
  }
  &--activated {
    background-color: var(--calcite-app-background-active);
    color: var(--calcite-app-foreground-active);
  }
}
