/**
 * @license
 * Copyright 2021 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/tokens/resolvers';
@use '@material/fab/extended-fab-theme';
@use '@material/fab/fab-theme';
@use '@material/fab/fab-custom-properties';
@use '@material/theme/css';
@use '@material/theme/custom-properties';
@use '@material/theme/keys';
@use '@material/ripple/ripple-theme' as mdc-ripple-theme;

@mixin theme-styles($theme, $resolvers: resolvers.$material) {
  .mdc-fab--extended {
    @include extended-fab-theme.theme-styles($theme, $resolvers);
  }

  $theme: keys.create-theme-properties($theme, $prefix: 'extended-fab');

  .mdc-fab.mdc-fab--extended {
    @include _deprecated-custom-props-theme-styles($theme);
  }

  @include mdc-ripple-theme.theme(
    (
      hover-state-layer-color: map.get($theme, hover-state-layer-color),
      focus-state-layer-color: map.get($theme, focus-state-layer-color),
      pressed-state-layer-color: map.get($theme, pressed-state-layer-color),
      hover-state-layer-opacity: map.get($theme, hover-state-layer-opacity),
      focus-state-layer-opacity: map.get($theme, focus-state-layer-opacity),
      pressed-state-layer-opacity: map.get($theme, pressed-state-layer-opacity),
    )
  );
}

///
/// Applies the given theme as custom properties without any selectors.
///
@mixin theme($theme, $resolvers: resolvers.$material) {
  @include extended-fab-theme.theme($theme, $resolvers: $resolvers);
}

///
/// Exposes outline styles with deprecated custom props because the tokenized
/// ones are not set in theme-styles since it requires the layout tokens to be
/// supplied alongside the outline tokens, and the layout tokens are not yet
/// finalized.
/// TODO(b/198496285): delete and replace with proper tokens when available.
///
@mixin _deprecated-custom-props-theme-styles($theme) {
  $extended-icon-padding: custom-properties.create(
    fab-custom-properties.$extended-icon-padding,
    extended-fab-theme.$extended-icon-padding
  );
  $extended-label-padding: custom-properties.create(
    fab-custom-properties.$extended-label-padding,
    extended-fab-theme.$extended-label-padding
  );
  @include extended-fab-theme.extended-padding(
    $extended-icon-padding,
    $extended-label-padding,
    $focus-outline-width: map.get($theme, focus-outline-width)
  );
}