//
// Copyright 2023 Google LLC
// SPDX-License-Identifier: Apache-2.0
//

// go/keep-sorted start
@use '../../focus/focus-ring';
// go/keep-sorted end

@mixin styles() {
  .trailing.action {
    align-items: center;
    justify-content: center;
    padding-inline-start: var(--_icon-label-space);
    padding-inline-end: var(--_with-trailing-icon-trailing-space);
  }

  .trailing.action :is(md-ripple, md-focus-ring) {
    border-radius: 50%;
    height: calc(4 / 3 * var(--_icon-size)); // 24px default
    width: calc(4 / 3 * var(--_icon-size)); // 24px default
  }

  .trailing.action md-focus-ring {
    inset: unset;
  }

  .has-trailing .primary.action {
    padding-inline-end: 0;
  }

  .trailing.icon {
    color: var(--_trailing-icon-color);
    height: var(--_icon-size);
    width: var(--_icon-size);
  }

  :where(:hover) .trailing.icon {
    color: var(--_hover-trailing-icon-color);
  }

  :where(:focus) .trailing.icon {
    color: var(--_focus-trailing-icon-color);
  }

  :where(:active) .trailing.icon {
    color: var(--_pressed-trailing-icon-color);
  }

  :where(.disabled) .trailing.icon {
    color: var(--_disabled-trailing-icon-color);
    opacity: var(--_disabled-trailing-icon-opacity);
  }

  :where(.selected) .trailing.icon {
    color: var(--_selected-trailing-icon-color);
  }

  :where(.selected:hover) .trailing.icon {
    color: var(--_selected-hover-trailing-icon-color);
  }

  :where(.selected:focus) .trailing.icon {
    color: var(--_selected-focus-trailing-icon-color);
  }

  :where(.selected:active) .trailing.icon {
    color: var(--_selected-pressed-trailing-icon-color);
  }

  @media (forced-colors: active) {
    .trailing.icon {
      color: ButtonText;
    }

    :where(.disabled) .trailing.icon {
      color: GrayText;
      opacity: 1;
    }
  }
}