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.

// go/keep-sorted start
@use 'sass:map';
// go/keep-sorted end
// go/keep-sorted start
@use '../../focus/focus-ring';
@use '../../icon/icon';
@use '../../sass/touch-target';
@use '../../tokens';
// go/keep-sorted end

@mixin styles() {
  :host {
    display: inline-flex;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    height: var(--_container-size);
    width: var(--_container-size);
    justify-content: center;

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

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

  .icon-button {
    align-items: center;
    background: none;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    justify-content: center;
    outline: none;
    position: relative;
    text-decoration: none;
    user-select: none;
    z-index: 0;
    flex: 1;
    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);
  }

  .icon {
    height: var(--_icon-size);
    width: var(--_icon-size);

    @include icon.theme(
      (
        size: var(--_icon-size),
        weight: inherit,
      )
    );
  }

  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);
  }

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

  .icon {
    display: inline-flex;
  }

  .link {
    height: 100%;
    outline: none;
    position: absolute;
    width: 100%;
  }

  .touch {
    @include touch-target.touch-target;
  }
}