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

@include themes-mixin {
  @include b(base-light-bar) {
    @include once {
      position: absolute;
      left: 0;
      right: 0;
      height: 0;
    }
    @include e(bar) {
      @include once {
        position: absolute;
        right: 0;
        left: 0;
        transition: background-color .3s $--n-ease-in-out-cubic-bezier, top .3s $--n-ease-in-out-cubic-bezier!important;
        &.#{block()}-transition-enter, &.#{block()}-transition-leave-to {
          opacity: 0;
        }
        &.#{block()}-transition-enter-active {
          transition: background-color .3s $--n-ease-in-out-cubic-bezier, opacity .15s $--n-ease-out-cubic-bezier, top .3s $--n-ease-in-out-cubic-bezier!important;
        }
        &.#{block()}-transition-leave-active {
          transition: background-color .3s $--n-ease-in-out-cubic-bezier, opacity .15s $--n-ease-in-cubic-bezier, top .3s $--n-ease-in-out-cubic-bezier!important;
        }
      }
      background-color: $--base-select-menu-light-bar-background-color;
    }
  }
}