$name: 'option-picker';

%item {
  align-items: center;
  border: 1px solid;
  border-color: inherit;
  display: flex;
  gap: 0.25em;
  padding: 0 0.25em;
}

%items {
  border-color: inherit;
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  padding: 1px;
}

.#{$name} {
  &,
  & * {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    box-sizing: border-box;
    color: inherit;
    font: inherit;
    outline: 0;
  }
}

.#{$name} {
  border: 1px solid;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  flex-wrap: wrap;
  position: relative;
  user-select: none;
  vertical-align: middle;
  &[aria-disabled='true'] {
    color: rgba(128, 128, 128);
    cursor: not-allowed;
    * {
      pointer-events: none;
    }
    .#{$name}__option,
    .#{$name}__value {
      &[aria-selected='true'] {
        background: rgba(0, 0, 0, 0.125);
      }
    }
  }
  &[aria-expanded='true'] {
    &:not([data-size]):not([data-size='1']) {
      z-index: 9999;
    }
    .#{$name}__arrow {
      &::after {
        border: {
          bottom: 0.5em solid;
          bottom-color: inherit;
          top-width: 0;
        }
      }
    }
    .#{$name}__options {
      visibility: visible;
    }
  }
  &[aria-invalid='true'] {
    color: rgb(255, 0, 0);
    .#{$name}__option,
    .#{$name}__value {
      &[aria-disabled='true'] {
        color: rgb(255, 128, 128);
        cursor: not-allowed;
        &[aria-selected='true'] {
          background: rgba(255, 0, 0, 0.125);
        }
      }
      &[aria-selected='true'] {
        background: rgba(255, 0, 0, 0.25);
      }
    }
  }
  &:not([aria-readonly='true']) {
    .#{$name}__text {
      &:focus-within {
        cursor: text;
      }
    }
  }
  &__arrow,
  &__text,
  &__value {
    @extend %item;
    overflow: hidden;
    position: relative;
  }
  &__arrow {
    &:focus {
      outline: 1px solid;
      outline-offset: -2px;
    }
    &::after {
      border: {
        left: 0.25em solid transparent;
        right: 0.25em solid transparent;
        top: 0.5em solid;
        top-color: inherit;
      }
      content: "";
      height: 0;
      width: 0;
    }
  }
  &__flex {
    @extend %items;
    flex: 1;
    overflow: hidden;
  }
  &__option {
    @extend %item;
    &[hidden] {
      display: none;
    }
    &[aria-disabled='true'] {
      color: rgb(128, 128, 128);
      cursor: not-allowed;
      &[aria-selected='true'] {
        background: rgba(0, 0, 0, 0.125);
      }
    }
    &[aria-selected='true'] {
      background: rgba(0, 0, 255, 0.5);
    }
    &:focus,
    &:where(:not([aria-disabled='true'])):hover {
      outline: 1px solid;
      outline-offset: -2px;
    }
  }
  &__options {
    @extend %items;
    border: inherit;
    flex: {
      direction: column;
      wrap: nowrap;
    }
    left: -1px;
    margin: 0;
    max-height: 0;
    min-width: calc(100% + 2px);
    position: absolute;
    top: 100%;
    visibility: hidden;
    white-space: nowrap;
    &[hidden] {
      display: none;
    }
    &:empty {
      display: none;
    }
    &-batch {
      @extend %items;
      border: {
        color: inherit;
        style: inherit;
        width: 1px;
      }
      flex-direction: column;
      &::before {
        @extend %item;
        content: attr(value);
        font-weight: bold;
      }
    }
    &-lot {
      @extend %items;
      border: {
        color: inherit;
        style: inherit;
        width: 0;
      }
      display: flex;
      flex: {
        direction: column;
        wrap: nowrap;
      }
      gap: inherit;
      overflow: auto;
      padding: 0;
    }
  }
  &__self {
    background: 0 0;
    border-radius: 0;
    border: 0;
    bottom: 0;
    box-shadow: none;
    color: transparent;
    font: 0/0 a;
    height: 1px;
    left: 0;
    margin: 0;
    opacity: 0;
    outline: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    text-shadow: none;
    width: 1px;
  }
  &__text {
    border-color: transparent;
    flex: 1;
    span {
      flex: 1;
      position: relative;
      z-index: 1;
      // Ensure height even when it is empty
      &::after {
        content: '\200c';
      }
      * {
        display: inline; // Remove (hide) line-break in tag editor
      }
      br {
        display: none;
      }
      + span {
        align-items: center;
        bottom: 0;
        display: flex;
        left: 0;
        opacity: 0.5;
        padding: inherit;
        position: absolute;
        right: 0;
        top: 0;
        white-space: nowrap;
        z-index: 0;
      }
    }
  }
  &__v {
    flex: 1;
    &:empty {
      &::after {
        content: '\200c';
      }
    }
  }
  &__value {
    flex: 1;
    &[aria-disabled='true'] {
      &[aria-selected='true'] {
        background: rgba(0, 0, 0, 0.125);
      }
    }
    &[aria-selected='true'] {
      background: rgba(0, 0, 255, 0.5);
    }
    &:focus {
      outline: 1px solid;
      outline-offset: -2px;
    }
  }
  &__x {
    height: 1em;
    line-height: 0;
    margin-right: -0.125em;
    position: relative;
    user-select: none;
    width: 1em;
    &::after,
    &::before {
      border: 1px solid;
      bottom: 0;
      content: "";
      left: 50%;
      margin-left: -1px;
      position: absolute;
      top: 0;
    }
    &::after {
      transform: rotate(45deg);
    }
    &::before {
      transform: rotate(135deg);
    }
  }
  &[data-size] {
    .#{$name}__arrow {
      display: none;
    }
    .#{$name}__options {
      border-width: 1px 0 0;
      min-width: 0;
      position: static;
      visibility: visible;
    }
  }
}