material-web/iconbutton/lib/_filled-tonal-icon-button.scss

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

// stylelint-disable selector-class-pattern --
// Selector '.md3-*' should only be used in this project.

@use 'sass:map';
@use '../../ripple/ripple';
@use '../../focus/focus-ring';
@use '../../sass/theme';
@use '../../tokens';
@use './shared';

$_custom-property-prefix: 'filled-tonal-icon-button';

@mixin theme($tokens) {
  $tokens: theme.validate-theme(
    tokens.md-comp-filled-tonal-icon-button-values(),
    $tokens
  );
  $tokens: shared.flatten-disabled-colors($tokens, $variant: 'filled-tonal');
  $tokens: shared.resolve-shape-tokens($tokens);
  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);

  @include theme.emit-theme-vars($tokens);
}

@mixin styles() {
  $tokens: tokens.md-comp-filled-tonal-icon-button-values();
  $tokens: shared.flatten-disabled-colors($tokens, $variant: 'filled-tonal');
  $tokens: shared.resolve-shape-tokens($tokens);
  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);

  :host {
    @each $token, $value in $tokens {
      --_#{$token}: #{$value};
    }

    @include focus-ring.theme(
      (
        shape: (
          var(--_container-shape-start-start),
          var(--_container-shape-start-end),
          var(--_container-shape-end-end),
          var(--_container-shape-end-start),
        ),
      )
    );
  }

  .md3-icon-button {
    background-color: var(--_container-color);
    color: var(--_icon-color);

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

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

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

    &:disabled {
      background-color: var(--_disabled-container-color);
      color: var(--_disabled-icon-color);
    }

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

  .md3-icon-button--toggle-filled-tonal {
    &:not(:disabled) {
      background-color: var(--_unselected-container-color);
      color: var(--_toggle-unselected-icon-color);

      &:hover {
        color: var(--_toggle-unselected-hover-icon-color);
      }

      &:focus {
        color: var(--_toggle-unselected-focus-icon-color);
      }

      &:active {
        color: var(--_toggle-unselected-pressed-icon-color);
      }
    }

    @include ripple.theme(
      (
        focus-state-layer-color:
          var(--_toggle-unselected-focus-state-layer-color),
        hover-state-layer-color:
          var(--_toggle-unselected-hover-state-layer-color),
        pressed-state-layer-color:
          var(--_toggle-unselected-pressed-state-layer-color),
      )
    );
  }

  .md3-icon-button--on {
    &:not(:disabled) {
      background-color: var(--_selected-container-color);
      color: var(--_toggle-selected-icon-color);

      &:hover {
        color: var(--_toggle-selected-hover-icon-color);
      }

      &:focus {
        color: var(--_toggle-selected-focus-icon-color);
      }

      &:active {
        color: var(--_toggle-selected-pressed-icon-color);
      }
    }

    @include ripple.theme(
      (
        focus-state-layer-color: var(--_toggle-selected-focus-state-layer-color),
        hover-state-layer-color: var(--_toggle-selected-hover-state-layer-color),
        pressed-state-layer-color:
          var(--_toggle-selected-pressed-state-layer-color),
      )
    );
  }
}