/* ======================================================================== *
 * Copyright 2025 HCL America Inc.                                          *
 * Licensed under the Apache License, Version 2.0 (the "License");          *
 * you may not use this file except in compliance with the License.         *
 * You may obtain a copy of the License at                                  *
 *                                                                          *
 * http://www.apache.org/licenses/LICENSE-2.0                               *
 *                                                                          *
 * Unless required by applicable law or agreed to in writing, software      *
 * distributed under the License is distributed on an "AS IS" BASIS,        *
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. *
 * See the License for the specific language governing permissions and      *
 * limitations under the License.                                           *
 * ======================================================================== */

@use "sass:map";
@use "../../common/palette";
@use "../../common/themeMap.module";

@mixin enchanted-icon-button-base-styles {
  &::part(button-start-icon-small-without-padding),
  &::part(button-start-icon-medium-without-padding),
  &::part(button-start-icon),
  &::part(button-contained-hovered),
  &::part(button-start-icon-small-with-padding),
  &::part(button-start-icon-medium-with-padding) {
    align-items: center;
    justify-content: center;
    background-color: map.get(themeMap.$enchantedPalette, disabledBackground);
    border: none;
  }

  &::part(icon-button-contained),
  &::part(icon-button-contained-inverse),
  &::part(icon-button-contained-focused),
  &::part(icon-button-contained-focused-inverse),
  &::part(icon-button-contained-disabled),
  &::part(icon-button-contained-disabled-inverse),
  &::part(icon-button-contained):hover {
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    vertical-align: middle;
    appearance: none;
    text-align: center;
    font-size: 1.5rem;
    color: map.get(themeMap.$enchantedPalette, BLACK60P);
    --icon-theme-color: #{map.get(themeMap.$enchantedPalette, BLACK60P)};
    background-color: transparent;
    outline: none;
    margin: 0px;
    text-decoration: none;
    flex: 0 0 auto;
    overflow: visible;
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 2px;
    padding: 0px;
  }
  &::part(icon-button-contained-disabled),
  &::part(icon-button-contained-disabled-inverse) {
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.38;
    border: none;
  }

  &::part(icon-button-contained),
  &::part(icon-button-contained-inverse) {
    cursor: pointer;
    border-width: 0px;
    border-style: initial;
    border-color: initial;
    border-image: initial;
  }

  &::part(icon-button-contained-inverse) {
    color: palette.clr(light, action, inverse);
    --icon-theme-color: #{palette.clr(light, action, inverse)};
  }
  
  &::part(icon-button-contained):active,
  &::part(icon-button-contained-inverse):active,
  &::part(icon-button-contained):focus,
  &::part(icon-button-contained-inverse):focus,
  &::part(icon-button-contained):focus-visible,
  &::part(icon-button-contained-inverse):focus-visible,
  &::part(icon-button-contained-focused),
  &::part(icon-button-contained-focused-inverse)
  {
    cursor: pointer;
    border-width: 0px;
    border-style: initial;
    border-color: initial;
    border-image: initial;
    background-color: transparent;
    outline: palette.clr(light, action, focus) 2px solid;
    outline-offset: 1px;
  }

  &::part(icon-button-contained-inverse):active,
  &::part(icon-button-contained-inverse):focus,
  &::part(icon-button-contained-inverse):focus-visible,
  &::part(icon-button-contained-focused-inverse) {
    color: palette.clr(light, action, inverse);
    --icon-theme-color: #{palette.clr(light, action, inverse)};
    outline: palette.clr(dark, action, focusInverse) 2px solid;
  }

  &::part(icon-button-contained-focused-inverse):hover {
    background-color: palette.clr(dark, action, hover);
  }

  &::part(icon-button-contained):hover,
  &::part(icon-button-contained-inverse):hover {
    cursor: pointer;
    border-width: 0px;
    border-style: initial;
    border-color: initial;
    border-image: initial;
  }

  &::part(icon-button-contained):hover,
  &::part(icon-button-contained-focused):hover {
    background-color: palette.clr(light, action, hover);
  }
  
  &::part(icon-button-contained-inverse):hover {
    color: palette.clr(dark, action, active);
    --icon-theme-color: #{palette.clr(dark, action, active)};
    background-color: palette.clr(dark, action, hover);
  }

  &::part(button-start-icon) {
    color: palette.clr(light, background, paper);
    height: 16px;
    margin-right: 4px;
    width: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &::part(button-start-icon-small-without-padding),
  &::part(button-start-icon-medium-without-padding) {
    box-sizing: border-box;
    padding: 0px;
    outline: none;
    line-height: 0;
  }
  &::part(button-start-icon-small-without-padding) {
    height: 16px;
    width: 16px;
    --icon-theme-size: 16px;
  }
  &::part(button-start-icon-medium-without-padding) {
    height: 20px;
    width: 20px;
    --icon-theme-size: 20px;
  }

  &::part(button-start-icon-fab) {
    height: 24px;
    width: 24px;
    padding: 8px;
    --icon-theme-size: 24px;
  }

  &::part(button-start-icon-small-with-padding),
  &::part(button-start-icon-medium-with-padding) {
    box-sizing: border-box;
    outline: none;
    line-height: 0;
  }
  &::part(button-start-icon-small-with-padding) {
    display: flex;
    height: 20px;
    width: 20px;
    padding: 2px;
    --icon-theme-size: 16px;
    vertical-align: middle;
  }
  &::part(button-start-icon-medium-with-padding) {
    display: flex;
    height: 28px;
    width: 28px;
    --icon-theme-size: 20px;
    padding: 4px;
    vertical-align: middle;
  }
}