@if $css-variable-enabled {
  $large-text: var(--large-text);
  $medium-text: var(--medium-text);
  $primary-transition: var(--primary-transition);
  $select-border-radius: var(--select-border-radius);
  $select-border-spread: var(--select-border-spread);
  $small-text: var(--small-text);
  $xlarge-text: var(--xlarge-text);
}

.#{$prefix}select {
  appearance: none;
  padding: {
    top: 8px;
    bottom: 6px;
    left: 10px;
    right: 10px;
  }
  background-color: var(--select-bg-color);
  color: var(--select-text-color);
  border-width: 0;
  border-bottom-width: 2px;
  border-color: $transparent;
  box-sizing: content-box;
  width: 100%;
  border-radius: $select-border-radius;
  transition: $primary-transition;
  font-size: $medium-text;

  &.#{$prefix}fixed {
    width: auto;
  }

  .#{$prefix}form-el.#{$prefix}fullwidth &, .#{$prefix}form-el.#{$prefix}full-width & {
    width: 100%;
  }

  --in-pad: 35px;

  ~ .#{$prefix}icon {
    --icon-size: 18px;
    --ic-margin: 10px;
    position: absolute !important;
    top: 50%;
    transform: translateY(-50%);
    margin: {
      top: 0 !important;
      bottom: 0 !important;
    }

    &.#{$prefix}left {
      left: 0;
      margin-right: 0 !important;
      margin-left: var(--ic-margin);
    }

    &.#{$prefix}right {
      right: 0;
      margin-left: 0 !important;
      margin-right: var(--ic-margin);
    }
  }

  &.#{$prefix}with-icon-left {
    padding-left: var(--in-pad) !important;
  }

  &.#{$prefix}with-icon-right {
    padding-right: var(--in-pad) !important;
  }

  &.#{$prefix}with-icon-both {
    padding-right: var(--in-pad) !important;
    padding-left: var(--in-pad) !important;
  }

  &.#{$prefix}small {
    font-size: $small-text;
    padding: {
      left: 9px;
      right: 9px;
    }

    --in-pad: 25px;

    ~ .#{$prefix}icon {
      --icon-size: 12px;
      --ic-margin: 8px;
    }
  }

  &.#{$prefix}large {
    font-size: $large-text;
    padding: {
      left: 16px;
      right: 16px;
    }

    --in-pad: 45px;

    ~ .#{$prefix}icon {
      --icon-size: 24px;
      --ic-margin: 14px;
    }
  }

  &.#{$prefix}xlarge {
    font-size: $xlarge-text;
    padding: {
      left: 20px;
      right: 20px;
    }

    --in-pad: 55px;

    ~ .#{$prefix}icon {
      --icon-size: 36px;
      --ic-margin: 13px;
    }
  }

  &[multiple] {
    padding: 0;
    border-bottom-width: 0px;
    box-sizing: content-box;
    width: max-content;

    option {
      padding: 5px 15px;
      text-align: center;
      background-color: var(--select-bg-color);
    }
  }

  &:hover, &.#{$prefix}hovered {
    background-color: var(--select-hovered-bg-color);
  }

  &:focus, &.#{$prefix}focused {
    background-color: var(--body-bg-color);
    border-color: $transparent !important;
      box-shadow: 0 0 0 $select-border-spread var(--select-border-spread-color);
  }

  @each $name, $color, $skip, $hovered-color in $item-colors {
    @if $name {
      &.#{$prefix}#{$name} {
        border-color: $color;

        &:focus, &.#{$prefix}focused {
          box-shadow: 0 0 0 $select-border-spread $hovered-color;
        }
      }
    }
  }

  @include small {
    &[multiple] {
      padding: 10px;

      option {
        &:first-child {
          border-top: {
            left-radius: 6px;
            right-radius: 6px;
          }
        }

        &:last-child {
          border-bottom: {
            left-radius: 6px;
            right-radius: 6px;
          }
        }
      }
    }
  }

  option {
    background-color: var(--body-bg-color);
    transition: $primary-transition;
  }

  &[disabled] {
    pointer-events: none;

    background-color: var(--item-disabled-bg-color);
    color: var(--item-disabled-fg-color);

    ~ .#{$prefix}icon {
      color: var(--item-disabled-fg-color);
    }

    option {
      background-color: var(--item-disabled-bg-color);
      color: var(--item-disabled-fg-color);
    }
  }
}