$top-arrow-size: 8px;
$arrow-up-shadow: 3px 3px 8px var(--wds-color-black-100-transparent-10, rgba(0, 0, 0, 0.1));
$arrow-down-shadow: -3px -3px 8px var(--wds-color-black-100-transparent-10, rgba(0, 0, 0, 0.1));

/* Option look mimics ListItemSelect (its component tokens), same as the
   Stylable file this replaces did. Component tokens chain through the
   token they point to in the default theme, then the legacy literal;
   themes where a token resolves differently re-emit the declaration in
   the sibling theme files. */
$option-font-size: var(--wds-input-value-font-size-medium, var(--wds-font-size-body-medium, 16px));
$option-line-height: var(--wds-input-value-font-line-height-medium, var(--wds-font-line-height-body-medium, 24px));
$option-title: var(--wds-list-item-select-title, var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624)));
$option-title-disabled: var(--wds-list-item-select-title-disabled, var(--wds-color-text-disabled, var(--wsr-color-D50, #ACAFC4)));
$option-active-title: var(--wds-list-item-select-active-title, var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF)));
$option-fill-hover: var(--wds-list-item-select-fill-hover, var(--wds-color-fill-standard-tertiary-hover, var(--wsr-color-B50, #E7F0FF)));
$option-active-fill: var(--wds-list-item-select-active-fill, var(--wds-color-fill-standard-primary, var(--wsr-color-B10, #116DFF)));
$option-active-fill-hover: var(--wds-list-item-select-active-fill-hover, var(--wds-color-fill-standard-primary-hover, var(--wsr-color-B20, #5999FF)));
$option-padding-vertical: var(--wds-list-item-select-padding-vertical-medium, var(--wds-space-100, 6px));
$option-padding-right: var(--wds-list-item-select-padding-horizontal-medium, var(--wds-space-300, 20px));
$option-padding-left: var(--wds-list-item-select-padding-horizontal-medium, var(--wds-space-300, 24px));
$option-height-small: var(--wds-dropdown-layout-option-size-small, var(--wds-space-600, 36px));
$option-height-big: var(--wds-dropdown-layout-option-size-big, var(--wds-space-800, 47px));

.dropdown-layout {
  box-sizing: border-box;
  position: relative;
  /* stylelint-disable-next-line plugin/use-baseline */
  outline: none;
  border: none;
  width: 100%;
  display: flex;
  justify-content: center;

  &#{&}--hidden {
    display: none;
  }

  & &__content-container {
    background: var(--wds-color-fill-surface-overlay, var(--wsr-color-D80, #FFFFFF));
    border: none;
    display: none;
    opacity: 0;
    height: 0;
    padding: 0;
    transition: opacity 0.2s ease;
    width: 100%;
    z-index: 6;
    left: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    /* stylelint-disable-next-line plugin/use-baseline */
    user-select: none;
  }

  &--container-styles &__content-container {
    border-radius: var(--wds-border-radius-surface-overlay, 8px);
    box-shadow: var(--wds-shadow-surface-overlay, var(--wsr-shadow30, 0 6px 6px 0 rgba(22, 45, 61, 0.06), 0 0 18px 0 rgba(22, 45, 61, 0.12)));
    position: absolute;
  }

  &--visible &__content-container {
    display: flex;
    flex-direction: column;
    height: auto;
    overflow: auto;
    opacity: 1;
  }

  &--visible#{&}--with-arrow &__content-container {
    padding: var(--wds-space-200, 10px) 0;
  }

  &--visible#{&}--container-styles#{&}--direction-up &__content-container {
    bottom: 0;
    margin-top: var(--wds-space-250, 15px);
  }

  &--visible#{&}--container-styles#{&}--with-arrow#{&}--direction-up &__content-container {
    margin-bottom: $top-arrow-size;
  }

  &--visible#{&}--container-styles#{&}--direction-down &__content-container {
    top: 0;
    margin-bottom: var(--wds-space-250, 15px);
  }

  &--visible#{&}--container-styles#{&}--with-arrow#{&}--direction-down &__content-container {
    margin-top: $top-arrow-size;
  }

  & &__options {
    position: relative;
    overflow: auto;
  }

  & &__options::-webkit-scrollbar {
    height: 0;
    width: 12px;
  }

  & &__options::-webkit-scrollbar-button {
    display: none;
    height: 6px;
  }

  & &__options::-webkit-scrollbar-thumb {
    /* https://stackoverflow.com/a/16829330/5343330 */
    background-color: var(--wds-scrollbar-fill, var(--wsr-color-B30, #A8CAFF));
    background-clip: content-box;
    border-radius: var(--wds-border-radius-full, calc(3px * 2));
    border: calc((12px - var(--wds-scrollbar-width, 6px)) / 2) solid transparent;
    height: 72px;
  }

  @media (hover: hover) {
    & &__options::-webkit-scrollbar-thumb:hover {
      background-color: var(--wds-scrollbar-fill-hover, var(--wsr-color-B20, #5999FF));
    }
  }

  & &__options::-webkit-scrollbar-thumb:active {
    background-color: var(--wds-scrollbar-fill-active, var(--wsr-color-B10, #116DFF));
  }

  /* we want to avoid applying this class to overlay scrollbar elements */
  & &__options-content * {
    box-sizing: border-box;
  }

  & &__option {
    font-family: var(--wds-font-family-default, var(--wsr-font-family, Madefor, 'Helvetica Neue', Helvetica, Arial, 'メイリオ', 'meiryo', 'ヒラギノ角ゴ pro w3', 'hiragino kaku gothic pro', sans-serif));
    font-size: $option-font-size;
    font-weight: var(--wds-font-weight-medium, var(--wsr-font-weight-medium, 530));
    line-height: $option-line-height;
    letter-spacing: var(--wds-font-letter-spacing-0, unset);
    color: $option-title;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    padding: $option-padding-vertical $option-padding-right $option-padding-vertical $option-padding-left;
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
  }

  & &__option--override-style {
    padding: 0;
  }

  & &__option--disabled {
    color: $option-title-disabled;
    cursor: default;
  }

  :global(.rtl) &__option,
  :global([dir='rtl']) &__option {
    text-align: right;
    direction: rtl;
  }

  & &__option--hovered {
    background: $option-fill-hover;
    color: $option-title;
  }

  & &__option:focus {
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: none;
  }

  & &__option--selected {
    background-color: $option-active-fill;
    color: $option-active-title;
  }

  & &__option--selected#{&}__option--hovered {
    background-color: $option-active-fill-hover;
    color: $option-active-title;
  }

  /* selectableOption lands on a ListItemSelect root; it stays stronger
     than that component's own min-height rule by specificity, not order */
  & &__selectable-option--item-height-small {
    min-height: $option-height-small;
  }

  & &__selectable-option--item-height-big {
    min-height: $option-height-big;
    display: flex;
    align-items: center;
  }

  & &__arrow {
    position: absolute;
    left: 50%;
    z-index: 10;
    transform: translateX(-50%) rotateZ(45deg);
    height: $top-arrow-size;
    width: $top-arrow-size;
    background: var(--wds-color-white, var(--wsr-color-D80, #FFFFFF));
  }

  &--direction-up &__arrow {
    bottom: calc(#{$top-arrow-size} / 2);
    box-shadow: $arrow-up-shadow;
  }

  &--direction-down &__arrow {
    top: calc(#{$top-arrow-size} / 2);
    box-shadow: $arrow-down-shadow;
  }

  & &__loader {
    display: flex;
    justify-content: center;
    padding-bottom: var(--wds-space-400, 24px);
    padding-top: var(--wds-space-400, 24px);
  }

  & &__link-item {
    text-decoration: none;
  }

  & &__dropdown-option {
    width: 100%;
  }
}