material-components_material-web/chips/lib/_shared.scss

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

// go/keep-sorted start
@use 'sass:map';
// go/keep-sorted end
// go/keep-sorted start
@use '../../elevation/elevation';
@use '../../focus/focus-ring';
@use '../../ripple/ripple';
@use '../../sass/shape';
// go/keep-sorted end

@mixin styles() {
  :host {
    border-start-start-radius: var(--_container-shape-start-start);
    border-start-end-radius: var(--_container-shape-start-end);
    border-end-start-radius: var(--_container-shape-end-start);
    border-end-end-radius: var(--_container-shape-end-end);
    display: inline-flex;
    height: var(--_container-height);

    @include elevation.theme(
      (
        surface-tint: var(--_container-surface-tint-layer-color),
      )
    );

    @include ripple.theme(
      (
        focus-color: var(--_focus-state-layer-color),
        focus-opacity: var(--_focus-state-layer-opacity),
        hover-color: var(--_hover-state-layer-color),
        hover-opacity: var(--_hover-state-layer-opacity),
        pressed-color: var(--_pressed-state-layer-color),
        pressed-opacity: var(--_pressed-state-layer-opacity),
      )
    );
  }

  .container {
    align-items: baseline;
    appearance: none;
    background: none;
    border: none;
    border-radius: inherit;
    box-sizing: border-box;
    display: flex;
    gap: 8px;
    height: 100%;
    outline: none;
    padding: 0 8px;
    position: relative;
    text-decoration: none;
    width: 100%;

    // Container and outline color, separate node for disabled opacity changes
    &::before {
      border-radius: inherit;
      content: '';
      inset: 0;
      pointer-events: none;
      position: absolute;
    }
  }

  .container:not(.disabled) {
    cursor: pointer;
  }

  .container.disabled {
    pointer-events: none;
  }

  .flat::before {
    border: var(--_flat-outline-width) solid var(--_flat-outline-color);
  }

  .flat:focus::before {
    border-color: var(--_flat-focus-outline-color);
  }

  .flat.disabled::before {
    border-color: var(--_flat-disabled-outline-color);
    opacity: var(--_flat-disabled-outline-opacity);
  }

  .elevated {
    @include elevation.theme(
      (
        level: var(--_elevated-container-elevation),
        shadow-color: var(--_elevated-container-shadow-color),
      )
    );
  }

  .elevated::before {
    background: var(--_elevated-container-color);
  }

  .elevated:hover {
    @include elevation.theme(
      (
        level: var(--_elevated-hover-container-elevation),
      )
    );
  }

  .elevated:focus-within {
    @include elevation.theme(
      (
        level: var(--_elevated-focus-container-elevation),
      )
    );
  }

  .elevated:active {
    @include elevation.theme(
      (
        level: var(--_elevated-pressed-container-elevation),
      )
    );
  }

  .elevated.disabled {
    @include elevation.theme(
      (
        level: var(--_elevated-disabled-container-elevation),
      )
    );
  }

  .elevated.disabled::before {
    background: var(--_elevated-disabled-container-color);
    opacity: var(--_elevated-disabled-container-opacity);
  }

  md-focus-ring {
    @include focus-ring.theme(
      (
        shape: shape.corners-to-shape-token('--_container-shape'),
      )
    );
  }

  md-ripple {
    border-radius: inherit;
  }

  .label,
  .icon {
    // Place content above background elements
    z-index: 1;
  }

  .label {
    align-items: center;
    color: var(--_label-text-color);
    display: flex;
    font: var(--_label-text-type);
    height: 100%;
    text-overflow: ellipsis;
    user-select: none;
    white-space: nowrap;
  }

  :hover .label {
    color: var(--_hover-label-text-color);
  }

  :focus .label {
    color: var(--_focus-label-text-color);
  }

  :active .label {
    color: var(--_pressed-label-text-color);
  }

  .disabled .label {
    color: var(--_disabled-label-text-color);
    opacity: var(--_disabled-label-text-opacity);
  }

  .icon {
    align-self: center;
    font-size: var(--_icon-size);
    max-height: var(--_icon-size);
    max-width: var(--_icon-size);
  }

  .icon ::slotted(*) {
    font-size: inherit;
    height: 100%;
    width: 100%;
  }

  .icon.leading {
    color: var(--_leading-icon-color);
  }

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

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

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

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