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

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

@use 'sass:map';
@use '@material/elevation/elevation-theme';
@use '@material/fab/mixins' as fab-mixins;
@use '@material/fab/fab' as mdc-fab;
@use '@material/fab/variables' as fab-variables;
@use '@material/fab/fab-custom-properties';
@use '@material/rtl/rtl';
@use '@material/animation';
@use '@material/shape/shape';
@use '@material/theme/theme';
@use '@material/theme/custom-properties';
@use '@material/mwc-icon/mwc-icon';
@use './fab-theme';

$icon-size: map.get(fab-theme.$light-theme-deprecated, icon-size);

@mixin core-styles() {
  outline: none;
  --mdc-ripple-color: currentcolor;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  display: inline-flex;

  @include fab-mixins.without-ripple();
  @include static-styles();

  .mdc-fab {
    $outline-color: custom-properties.create(
      --mdc-fab-focus-outline-color,
      initial
    );
    @include fab-mixins.focus-outline-color($outline-color);

    $outline-width: custom-properties.create(
      --mdc-fab-focus-outline-width,
      0px
    );
    @include fab-mixins.focus-outline-width($outline-width);

    @include theme.property(
      box-shadow,
      custom-properties.create(
        --mdc-fab-box-shadow,
        elevation-theme.elevation-box-shadow(6)
      )
    );

    &:hover,
    &:focus {
      @include theme.property(
        box-shadow,
        custom-properties.create(
          --mdc-fab-box-shadow,
          elevation-theme.elevation-box-shadow(8)
        )
      );
    }

    &:active {
      @include theme.property(
        box-shadow,
        custom-properties.create(
          --mdc-fab-box-shadow,
          elevation-theme.elevation-box-shadow(12)
        )
      );
    }

    .ripple {
      overflow: hidden;
    }

    .mdc-fab__label {
      z-index: 0;
    }

    &:not(.mdc-fab--extended) .ripple {
      @include shape.radius(fab-variables.$shape-radius);
    }

    &.mdc-fab--extended .ripple {
      @include shape.radius(
        fab-variables.$shape-radius,
        $component-height: fab-variables.$extended-height
      );
    }

    .mdc-fab__icon {
      @include theme.property(
        width,
        custom-properties.create(--mdc-icon-size, $icon-size)
      );
      @include theme.property(
        height,
        custom-properties.create(--mdc-icon-size, $icon-size)
      );
      @include theme.property(
        font-size,
        custom-properties.create(--mdc-icon-size, $icon-size)
      );

      @include fab-mixins.icon_();
      @include fab-mixins.icon-overrides_();
    }

    &.mdc-fab--extended {
      $extended-icon-padding: custom-properties.create(
        fab-custom-properties.$extended-icon-padding,
        fab-variables.$extended-icon-padding
      );
      $extended-label-padding: custom-properties.create(
        fab-custom-properties.$extended-label-padding,
        fab-variables.$extended-label-padding
      );
      @include fab-mixins.focus-outline-width(
        $width: $outline-width,
        $padding: 0 $extended-label-padding
      );
      &.icon-end {
        .mdc-fab__icon {
          @include fab-mixins.extended-icon-padding(
            $extended-icon-padding,
            $extended-label-padding,
            $is-icon-at-end: true
          );
        }
      }
    }
  }
}

@mixin static-styles() {
  -webkit-tap-highlight-color: transparent;
  display: inline-flex;
  outline: none;
  user-select: none;

  @include mdc-fab.static-styles();

  .mdc-fab {
    .ripple {
      overflow: hidden;
    }

    &:not(.mdc-fab--extended) .ripple {
      @include shape.radius(fab-variables.$shape-radius);
    }

    &.mdc-fab--extended .ripple {
      @include shape.radius(
        fab-variables.$shape-radius,
        $component-height: fab-variables.$extended-height
      );
    }

    .mdc-fab__label {
      z-index: 0;
    }

    .material-icons {
      @extend %material-icons;
    }
    .mdc-fab__icon ::slotted(*) {
      width: inherit;
      height: inherit;
      font-size: inherit;
    }
  }

  .mdc-fab--extended.mdc-fab--exited .mdc-fab__icon ::slotted(*) {
    transform: scale(0);
    transition: animation.exit-permanent(transform, 135ms);
  }

  .mdc-fab--extended {
    @include fab-theme.theme-deprecated(
      (
        container-width: auto,
      )
    );
  }

  .mdc-fab--mini {
    @include fab-theme.theme-deprecated(
      (
        container-width: 40px,
        container-height: 40px,
      )
    );
  }
}