/**
 * @license
 * Copyright 2021 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */

@use '@material/icon-button/icon-button';
@use '@material/icon-button/icon-button-theme';
@use '@material/theme/custom-properties';
@use '@material/feature-targeting' as feature;
@use '@material/mwc-icon/_mwc-icon';

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

@mixin static-styles() {
  @include icon-button.static-styles();

  :host {
    display: inline-block;
    outline: none;
  }

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

  .mdc-icon-button {
    i,
    svg,
    img,
    ::slotted(*) {
      display: block;
    }
  }
}

@mixin core-styles() {
  @include icon-button.without-ripple();
  @include static-styles();

  :host {
    --mdc-ripple-color: currentcolor;
    -webkit-tap-highlight-color: transparent;
  }

  .material-icons {
    @extend %material-icons;
  }

  :host,
  .mdc-icon-button {
    /**
     * Any vertical-align other than the default of "baseline" will work here (and
     * "top" is the shortest).
     *
     * In general, when an inline-block element has vertical-align: baseline and
     * also a fixed height, extra space may "appear" below it. This is because the
     * baseline it is aligned to is not the very bottom of the line, it's the line
     * above the "descenders" (e.g. the tail of a "y" or "j"). This means the
     * container must grow to accomodate both the fixed height inline-element, and
     * the descender height below it.
     *
     * For unknown reasons, in this particular case, this only causes incorrect
     * alignment in IE.
     *
     * IE needs the vertical-align on both the button and the host element.
     */
    vertical-align: top;
  }

  .mdc-icon-button {
    @include mdc-icon-button-size-var-aware(
      var(--mdc-icon-button-size, #{icon-button-theme.$size})
    );

    i,
    svg,
    img,
    ::slotted(*) {
      display: block;
      $feat-structure: feature.create-target(feature.all(), structure);
      @include feature.targets($feat-structure) {
        width: var(--mdc-icon-size, #{icon-button-theme.$icon-size});
        height: var(--mdc-icon-size, #{icon-button-theme.$icon-size});
      }
    }
  }
}

@mixin mdc-icon-button-size-var-aware($size, $query: feature.all()) {
  $feat-structure: feature.create-target($query, structure);

  @include feature.targets($feat-structure) {
    width: $size;
    height: $size;
    padding: calc(
      (#{$size} - var(--mdc-icon-size, #{icon-button-theme.$icon-size})) / 2
    );
  }
}