:host {
  @extend %component-host;
  @include borderShadow();
  display: flex;
  transition: background-color var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function),
    box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);
}

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

:host(:hover) {
  background-color: var(--calcite-app-background-hover);
}

calcite-pick-list-item {
  box-shadow: none;
  flex-grow: 1;
  position: relative;
  margin: 0;
}

:host([selected]) {
  @include borderShadowActive();
}
:host([selected]) calcite-pick-list-item:hover {
  background-color: var(--calcite-app-background-clear);
}

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

:host(:last-child) .handle {
  margin-bottom: 0;
}
