.c-sf-add-button {
  display: grid;
  align-items: center;
  justify-content: center;
  width: theme('spacing.5');
  height: theme('spacing.5');
  appearance: none;
  color: $color-teal;
  background-color: $color-white;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  border: 1px solid currentColor;
  border-radius: theme('borderRadius.full');
  margin-inline-start: theme('spacing.[0.5]');

  .icon {
    width: theme('spacing.3');
    height: theme('spacing.3');
    transition: transform $add-transition-duration ease-in-out;
  }

  &--close .icon {
    transform: rotate(45deg);
  }

  &--visible {
    opacity: 1;
    pointer-events: unset;

    @media (hover: hover) {
      opacity: 0;

      .w-panel--nested:is(:hover, :focus-within) & {
        opacity: 1;
      }
    }
  }

  &:hover,
  &:focus-visible {
    color: $color-white;
    background-color: $color-teal;
  }

  &[disabled] {
    opacity: 0.2;
    pointer-events: none;

    @media (forced-colors: active) {
      color: GrayText;
    }
  }
}

.c-sf-add-button {
  display: grid;
  align-items: center;
  justify-content: center;
  width: theme('spacing.5');
  height: theme('spacing.5');
  appearance: none;
  color: $color-teal;
  background-color: $color-white;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  border: 1px solid currentColor;
  border-radius: theme('borderRadius.full');
  margin-inline-start: theme('spacing.[0.5]');

  .icon {
    width: theme('spacing.3');
    height: theme('spacing.3');
    transition: transform $add-transition-duration ease-in-out;
  }

  &--close .icon {
    transform: rotate(45deg);
  }

  &--visible {
    opacity: 1;
    pointer-events: unset;

    @media (hover: hover) {
      opacity: 0;

      .w-panel--nested:is(:hover, :focus-within) & {
        opacity: 1;
      }
    }
  }

  &:hover,
  &:focus-visible {
    color: $color-white;
    background-color: $color-teal;
  }

  &[disabled] {
    opacity: 0.2;
    pointer-events: none;

    @media (forced-colors: active) {
      color: GrayText;
    }

    @media (hover: hover) {
      opacity: 0;

      .w-panel--nested:is(:hover, :focus-within) & {
        opacity: 0.2;
      }
    }
  }
}

Fix disabled style on StreamField add button
Fix disabled style on StreamField add button

Fixes #9512

An `opacity: 0.2` style is defined for the disabled button state, but the `opacity: 1` hover style takes precedence over it. As a result, the only time it kicks in - on media with hover support - is when the StreamField does NOT have hover / focus, which would ordinarily be the time when the button is hidden entirely.

Fix this by adding hover states to the `&[disabled]` case, to match the order of precedence for the normal button state.
