@use "./mixins";

@layer components {
  .block-action {
    @include mixins.layout-base;

    &__control {
      @include mixins.control;
    }

    &__override {
      @include mixins.override;
    }

    &__indicator.is-indicating:not(.block-action__indicator--color-reset) {
      @include mixins.indicator;

      .background-primary &,
      .surface-primary & {
        @include mixins.indicator;
      }

      .background-contrast &,
      .surface-contrast & {
        @include mixins.indicator("black");
      }

      .surface-secondary & {
        @include mixins.indicator("orange");
      }

      .surface-tertiary & {
        @include mixins.indicator("orange-dark");
      }
    }

    &--border-on-hover:has(.block-action__control:hover),
    &--border-on-hover:has(.block-action__control:focus-visible) {
      @include mixins.border;
    }
  }
}