index.scss

$name: 'option-picker';

:root {
  --color-#{$name}--disabled: #666;
  --color-#{$name}: #000;
  --color-#{$name}__option--active: #fff;
  --color-#{$name}__option--disabled: #666;
  --color-#{$name}__option--hover: #fff;
  --color-#{$name}__option--selected: #00f;
  --color-#{$name}__option-group--disabled: #666;
  --color-#{$name}__option-group: #000;
  --color-#{$name}__options--disabled: #666;
  --fill-#{$name}--disabled: #eee;
  --fill-#{$name}: #fff;
  --fill-#{$name}__option--active: #009;
  --fill-#{$name}__option--disabled: none;
  --fill-#{$name}__option--hover: #00f;
  --fill-#{$name}__option--selected: none;
  --fill-#{$name}__option: none;
  --fill-#{$name}__options--disabled: #eee;
  --fill-#{$name}__options: #fff;
  --font-face-#{$name}: inherit;
  --font-height-#{$name}: 1.5em;
  --font-size-#{$name}: inherit;
  --shadow-#{$name}: none;
  --shadow-#{$name}__options: 0 1px 2px rgba(0, 0, 0, .4);
  --stroke-#{$name}--disabled: #666;
  --stroke-#{$name}--focus: #00f;
  --stroke-#{$name}--open: #00f;
  --stroke-#{$name}: #000;
  --stroke-#{$name}__options--disabled: #999;
  --stroke-#{$name}__options--open: #00f;
  --stroke-#{$name}__options: #000;
  --width-#{$name}: 12em;
}

.#{$name} {
  &,
  &::before,
  &::after,
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    font: inherit;
  }
}

.#{$name} {
  -moz-user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  background: var(--fill-#{$name});
  border: 1px solid;
  border-color: var(--stroke-#{$name});
  border-radius: var(--arc-#{$name});
  box-shadow: var(--shadow-#{$name});
  color: var(--color-#{$name});
  cursor: pointer;
  display: inline-block;
  font-family: var(--font-face-#{$name});
  font-size: var(--font-size-#{$name});
  height: var(--height-#{$name}, auto);
  line-height: var(--font-height-#{$name});
  max-height: var(--height-max-#{$name}, 100%);
  max-width: var(--width-max-#{$name}, 100%);
  min-height: var(--height-min-#{$name}, 0);
  min-width: var(--width-min-#{$name}, 0);
  outline: 0;
  padding: .25em;
  position: relative;
  user-select: none;
  vertical-align: middle;
  width: var(--width-#{$name}, auto);
  @each $v in (hover, focus, active) {
    &:#{$v} {
      background: var(--fill-#{$name}--#{$v}, var(--fill-#{$name}));
      border-color: var(--stroke-#{$name}--#{$v}, var(--stroke-#{$name}));
      box-shadow: var(--shadow-#{$name}--#{$v}, var(--shadow-#{$name}));
      color: var(--color-#{$name}--#{$v}, var(--color-#{$name}));
    }
  }
  &::after {
    border: 0 solid transparent;
    border-bottom-color: inherit;
    border-left-width: .35em;
    border-right-width: .35em;
    border-top-color: inherit;
    border-top-width: .45em;
    content: "";
    height: 0;
    pointer-events: none;
    position: absolute;
    right: .5em;
    top: calc(50% - (.45em / 2));
    width: 0;
  }
  &--open {
    &.#{$name}--down {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
    &.#{$name}--up {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
    &::after {
      border-bottom-width: .45em;
      border-top-width: 0;
    }
    .#{$name}__options {
      background: var(--fill-#{$name}__options--open, var(--fill-#{$name}__options, var(--fill-#{$name})));
      border-color: var(--stroke-#{$name}__options--open, var(--stroke-#{$name}__options, var(--stroke-#{$name})));
      color: var(--color-#{$name}__options--open, var(--stroke-#{$name}__options, var(--stroke-#{$name})));
      display: block;
    }
    &.#{$name}--down {
      .#{$name}__options {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
      }
    }
    &.#{$name}--up {
      .#{$name}__options {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }
  * {
    outline: 0;
  }
}

@each $v in (focus, disabled) {
  .#{$name}.#{$name}--#{$v} {
    background: var(--fill-#{$name}--#{$v}, var(--fill-#{$name}));
    border-color: var(--stroke-#{$name}--#{$v}, var(--stroke-#{$name}));
    box-shadow: var(--shadow-#{$name}--#{$v}, var(--shadow-#{$name}));
    color: var(--color-#{$name}--#{$v}, var(--color-#{$name}));
  }
}

.#{$name}__options {
  background: var(--fill-#{$name}__options, var(--fill-#{$name}));
  border: inherit;
  border-color: var(--stroke-#{$name}__options, var(--stroke-#{$name}));
  border-radius: var(--arc-#{$name}__options, var(--arc-#{$name}));
  box-shadow: var(--shadow-#{$name}__options);
  color: var(--color-#{$name}__options, var(--color-#{$name}));
  display: none;
  overflow: auto;
  position: fixed;
  z-index: 9999;
  .#{$name}__option {
    background: var(--fill-#{$name}__option);
    color: var(--color-#{$name}__option);
    cursor: pointer;
    display: block;
    font: inherit;
    overflow: hidden;
    padding: 0 .5em;
    text-overflow: ellipsis;
    white-space: nowrap;
    &[hidden] {
      display: none;
    }
    @each $v in (hover, focus, active) {
      &:not(.#{$name}__option--disabled):#{$v} {
        background: var(--fill-#{$name}__option--#{$v}, var(--fill-#{$name}__option));
        color: var(--color-#{$name}__option--#{$v}, var(--color-#{$name}__option));
      }
    }
    @each $v in (selected, disabled) {
      &--#{$v} {
        background: var(--fill-#{$name}__option--#{$v}, var(--fill-#{$name}__option));
        color: var(--color-#{$name}__option--#{$v}, var(--color-#{$name}__option));
      }
    }
    &--disabled {
      cursor: not-allowed;
    }
  }
}

.#{$name}__option-group {
  display: block;
  padding: 0 .5em;
  &[title] {
    &::before {
      content: attr(title);
      display: block;
      font-weight: bold;
      margin: 0 -.5em;
      overflow: hidden;
      padding: 0 .5em;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  @each $v in (disabled) {
    &--#{$v} {
      color: var(--color-#{$v}__option-group--#{$v}, var(--color-#{$v}__option-group));
    }
  }
  .#{$name}__option {
    margin: 0 -.5em;
    padding-left: 1.5em;
  }
}

.#{$name}__source {
  left: -9999px;
  position: fixed;
  top: -9999px;
  &:disabled {
    + .#{$name} {
      background: var(--fill-#{$name}--disabled, var(--fill-#{$name}));
      border-color: var(--stroke-#{$name}--disabled, var(--stroke-#{$name}));
      color: var(--color-#{$name}--disabled, var(--color-#{$name}));
      cursor: not-allowed;
      &::after {
        border-top-color: var(--stroke-#{$name}--disabled, var(--stroke-#{$name}));
      }
      .#{$name}__option {
        color: var(--color-#{$name}--disabled, var(--color-#{$name}));
      }
      .#{$name}__options {
        background: var(--fill-#{$name}__options--disabled, var(--fill-#{$name}--disabled), var(--fill-#{$name}));
        border-color: var(--stroke-#{$name}__options--disabled, var(--stroke-#{$name}--disabled, var(--stroke-#{$name})));
        color: var(--color-#{$name}__options--disabled, var(--color-#{$name}--disabled, var(--color-#{$name})));
      }
      .#{$name}__options,
      .#{$name}__values {
        pointer-events: none;
      }
    }
  }
  &[size] {
    + .#{$name} {
      height: auto;
      &::after {
        display: none;
      }
      .#{$name}__options {
        border-color: inherit;
        border-width: 0;
        border-top-width: inherit;
        box-shadow: none;
        display: block;
        margin: .25em -.25em -.25em;
        position: relative;
        z-index: 1;
      }
      .#{$name}__values {
        margin: 0;
      }
    }
  }
  &[multiple] {
    + .#{$name} {
      .#{$name}__values {
        white-space: normal;
      }
    }
  }
}

.#{$name}__input {
  span {
    display: block;
    height: 100%;
    outline: 0;
    position: relative;
    z-index: 1;
    * {
      // Remove (hide) line-break in option editor
      display: none;
    }
    + span {
      bottom: 0;
      left: 0;
      opacity: .5;
      padding: inherit;
      position: absolute;
      right: 0;
      top: 0;
      white-space: nowrap;
      z-index: 0;
    }
  }
  span {
    position: relative;
    z-index: 1;
    + span {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      z-index: 0;
    }
  }
}

.#{$name}__input {
  cursor: text;
}

.#{$name}__input,
.#{$name}__values {
  display: block;
  margin-right: 1.25em;
  overflow: hidden;
  padding: 0 .25em;
  position: relative;
  text-overflow: ellipsis;
  white-space: nowrap;
}