material-web/iconbutton/lib/_icon-button.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.

// TODO(b/228217731): Remove compat dependencies
@use '@material/web/compat/touchtarget/touch-target';
@use '@material/web/focus/lib/focus-ring-theme';

@mixin static-styles() {
  :host {
    display: inline-flex;
    outline: none;

    @include _focus-ring();
  }

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

  .md3-icon-button {
    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;

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

  .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($set-width: true);
  }
}

@mixin _focus-ring() {
  @include focus-ring-theme.theme(
    (
      container-outer-padding-vertical: 0px,
      container-outer-padding-horizontal: 0px,
    )
  );
}