////
/// Tab Scheme
/// @group tab
////

@use 'src/module/color';
@use 'src/module/disabled';

@mixin _tab-scheme($legacy: false) {
  #{ns(tabs)} {
    @include color.box-shadow(default grey, (legacy: $legacy), bottom-1-out);

    @include before {
      @include color.box-shadow(default grey, (legacy: $legacy), top-1-in left-1-in right-1-in);
      @include color.background(default grey, (legacy: $legacy));
    }

    /**
    * Tab button
    */
    &__tab {
      @include color.background-image((border default grey) (border default grey) (border default grey) (border default grey), (legacy: $legacy));
      @include color.box-shadow(background default grey, (legacy: $legacy), bottom-2-out);

      &:not([aria-selected=true]) {
        @include color.background(action-low blue-france, (legacy: $legacy));
        @include color.text(action-high grey, (legacy: $legacy));
      }

      &[aria-selected=true]:not(:disabled) {
        @include color.background-image((border active blue-france) (border default grey) (border default grey) (border default grey), (legacy: $legacy));
        @include color.background(default grey, (legacy: $legacy));
        @include color.text(active blue-france, (legacy: $legacy));
      }

      @include disabled.selector((), (legacy: $legacy, text: true, background: true));
    }
  }
}