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

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

// This file contains common static styles that are shared across icon button
// variants.

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

@use 'sass:map';
@use '../../sass/color';
@use '../../sass/touch-target';
@use '../../sass/shape';
@use '../../sass/resolvers';
@use '../../tokens';

@mixin styles() {
  :host {
    display: inline-flex;
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }

  :host([disabled]) {
    pointer-events: none;
  }

  .md3-icon-button {
    $touch-target-height: 48px;

    align-items: center;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    fill: currentColor;
    justify-content: center;
    outline: none;
    position: relative;
    text-decoration: none;
    user-select: none;
    z-index: 0;
    height: var(--_container-size);
    width: var(--_container-size);
    font-size: var(--_icon-size);
    margin: max(
      0px,
      calc((#{$touch-target-height} - var(--_container-size)) / 2)
    );
    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);

    i,
    svg,
    img {
      height: var(--_icon-size);
      width: var(--_icon-size);
    }

    i,
    svg,
    img,
    ::slotted(*) {
      display: block;
    }
  }

  md-ripple {
    z-index: -1; // Place behind content
    // TODO(b/263517885): replace with ripple.theme(container-shape)
    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);
  }

  .md3-icon-button--flip-icon .md3-icon-button__icon {
    transform: scaleX(-1);
  }

  .md3-icon-button__icon {
    display: inline-flex;

    &.md3-icon-button__icon--on {
      display: none;
    }
  }

  .md3-icon-button--on {
    .md3-icon-button__icon {
      display: none;

      &.md3-icon-button__icon--on {
        display: inline-flex;
      }
    }
  }

  .md3-icon-button__link {
    height: 100%;
    outline: none;
    position: absolute;
    width: 100%;
  }

  .md3-icon-button__touch {
    @include touch-target.touch-target;
  }
}

///
// Flattens disabled colors for icon button theme keys (across all variants).
/// @param {String} $variant - The variant, specified as one of ('filled',
///     'outlined', 'standard').
///
@function flatten-disabled-colors($theme, $variant: 'standard') {
  // If opacity value is null (e.g. for dark theme map, only the color
  // changes, so the opacity value is null), use the default opacity value.
  // Otherwise, the color is not flattened, meaning that the color would
  // be applied without any opacity, which is incorrect.
  $opacity-keys: [ 'disabled-container-opacity', 'disabled-icon-opacity',
    'disabled-outline-opacity', 'disabled-selected-container-opacity' ];

  @each $opacity-key in $opacity-keys {
    // If opacity value is null, use the opacity value from the default tokens.
    @if not map.get($theme, $opacity-key) {
      $light-theme-value: map.get(
        tokens.md-comp-icon-button-values(),
        $opacity-key
      );
      $light-theme-filled-value: map.get(
        tokens.md-comp-filled-icon-button-values(),
        $opacity-key
      );
      $light-theme-filled-tonal-value: map.get(
        tokens.md-comp-filled-tonal-icon-button-values(),
        $opacity-key
      );
      $light-theme-outlined-value: map.get(
        tokens.md-comp-outlined-icon-button-values(),
        $opacity-key
      );

      @if $variant == 'standard' and $light-theme-value {
        $theme: map.set($theme, $opacity-key, $light-theme-value);
      } @else if $variant == 'filled' and $light-theme-filled-value {
        $theme: map.set($theme, $opacity-key, $light-theme-filled-value);
      } @else if $variant == 'filled-tonal' and $light-theme-filled-tonal-value
      {
        $theme: map.set($theme, $opacity-key, $light-theme-filled-tonal-value);
      } @else if $variant == 'outlined' and $light-theme-outlined-value {
        $theme: map.set($theme, $opacity-key, $light-theme-outlined-value);
      }
    }
  }

  @return color.join-color-and-opacity-pairs(
    $theme,
    (
      (
        color-key: 'disabled-container-color',
        opacity-key: 'disabled-container-opacity'
      ),
      (color-key: 'disabled-icon-color', opacity-key: 'disabled-icon-opacity'),
      (
        color-key: 'disabled-outline-color',
        opacity-key: 'disabled-outline-opacity'
      ),
      (
        color-key: 'disabled-selected-container-color',
        opacity-key: 'disabled-selected-container-opacity'
      )
    )
  );
}

@function resolve-shape-tokens($tokens, $property: 'container-shape') {
  @return shape.resolve-theme(
    $tokens,
    map.get(resolvers.$material, 'shape'),
    $property
  );
}