material-web/chips/internal/_selectable.scss

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

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

@mixin styles() {
  .selected {
    @include ripple.theme(
      (
        hover-color: var(--_selected-hover-state-layer-color),
        hover-opacity: var(--_selected-hover-state-layer-opacity),
        pressed-color: var(--_selected-pressed-state-layer-color),
        pressed-opacity: var(--_selected-pressed-state-layer-opacity),
      )
    );
  }

  :where(.selected)::before {
    background: var(--_selected-container-color);
  }

  :where(.selected) .outline {
    border-width: var(--_selected-outline-width);
  }

  :where(.selected.disabled)::before {
    background: var(--_disabled-selected-container-color);
    opacity: var(--_disabled-selected-container-opacity);
  }

  :where(.selected) .label {
    color: var(--_selected-label-text-color);
  }

  :where(.selected:hover) .label {
    color: var(--_selected-hover-label-text-color);
  }

  :where(.selected:focus) .label {
    color: var(--_selected-focus-label-text-color);
  }

  :where(.selected:active) .label {
    color: var(--_selected-pressed-label-text-color);
  }

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

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

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

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

  @media (forced-colors: active) {
    :where(.selected:not(.elevated))::before {
      // for forced-colors. Don't add it to elevated containers since elevation
      // already have a border added.
      border: 1px solid CanvasText;
    }

    :where(.selected) .outline {
      border-width: 1px;
    }
  }
}