@import './mixins/mixins.scss';

@include themes-mixin {
  @include once {
    @include b(select) {
      display: inline-block;
      border: none;
      outline: none;
      width: 100%;
      z-index: auto;
      text-align: start;
      vertical-align: baseline;
      // transform: translateZ(0); // to avoid blink of activator when animation occurs nearby
      @include not-m(multiple) {
        @include m(small-size) {
          height: 28px;
        }
        @include m(medium-size) {
          height: 34px;
        }
        @include m(large-size) {
          height: 40px;
        }
      }
      @include m(small-size) {
        line-height: 28px;
      }
      @include m(medium-size) {
        line-height: 34px;
      }
      @include m(large-size) {
        line-height: 40px;
      }
      @include m(small-size) {
        font-size: 14px;
      }
      @include m(medium-size) {
        font-size: 14px;
      }
      @include m(large-size) {
        font-size: 15px;
      }
    }
    @include b(select-menu) {
      transform: $--n-transform-debounce-scale;
      @include fade-in-scale-up-transition(
        select-menu,
        $original-transition: (background-color .3s $--n-ease-in-out-cubic-bezier)
      );
    }
  }
}