/* ======================================================================== *
 * Copyright 2026 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";
@use "../../common/typography";

@mixin enchanted-fab-base-styles {
    // Position fixed
    position: fixed;
    bottom: 24px;
    inset-inline-end: 24px;
    z-index: 1000;

    // Base structure
    &::part(fab),
    &::part(fab-rtl){
        position:relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        outline: none;
        padding:8px;
        border-radius:4px;
        border: none;
        box-shadow: #{map.get(themeMap.$enchantedPalette, shadows16)};
        transition: 
        background-color 0.3s ease,
        box-shadow 0.3s ease;
    }

    &[extended]::part(fab),
    &[extended]::part(fab-rtl) {
        width: auto;
        gap: 8px;
    }

    &::part(label),
    &::part(label-rtl) {
        text-align: start;
        white-space: nowrap;
        @include typography.subtitle2;
        padding: 5px 4px 5px 0;
    }

    // Icon styles
    &::part(icon) {
        --_icon-instance-size: 24px;
        line-height: 0;
    }
    &[type="contained"]::part(icon) {
        --_icon-instance-color: map.get(themeMap.$enchantedPalette, "WHITE93P");
    }
    &[type="outlined"]::part(icon) {
        --_icon-instance-color: map.get(themeMap.$enchantedPalette, "HCLSOFTWAREBLUE06");
    }

    // Contained FAB styles
    &[type="contained"]::part(fab),
    &[type="contained"]::part(fab-rtl) {
        background: map.get(themeMap.$enchantedPalette, "HCLSOFTWAREBLUE06");
        color:  map.get(themeMap.$enchantedPalette, "WHITE93P");
    }

    &[type="contained"]::part(fab):hover,
    &[type="contained"]::part(fab-rtl):hover{
        background: map.get(themeMap.$enchantedPalette, "HCLSOFTWAREBLUE07_DARK");
        color:  map.get(themeMap.$enchantedPalette, "WHITE93P");
    }

    &[type="contained"]::part(fab):focus,
    &[type="contained"]::part(fab-rtl):focus{
        border-radius: 7px;
        outline: 2px solid map.get(themeMap.$enchantedPalette, "HCLSOFTWAREBLUE06");
        outline-offset: 1px;
    }

    &[type="contained"]::part(fab):hover:focus,
    &[type="contained"]::part(fab-rtl):hover:focus{
        outline: 2px solid map.get(themeMap.$enchantedPalette, "HCLSOFTWAREBLUE06");
        outline-offset: 1px;
        border-radius: 7px;
        color: map.get(themeMap.$enchantedPalette, "WHITE93P");
    }

    // Outlined FAB styles
    &[type="outlined"]::part(fab),
    &[type="outlined"]::part(fab-rtl){
        background: map.get(themeMap.$enchantedPalette, "WHITE100P");
        outline: 2px solid map.get(themeMap.$enchantedPalette, "HCLSOFTWAREBLUE06");
        color: map.get(themeMap.$enchantedPalette, "HCLSOFTWAREBLUE06");
    }

    &[type="outlined"]::part(fab):hover,
    &[type="outlined"]::part(fab-rtl):hover{
        background: palette.clr(light, action, hover);
        border-color: map.get(themeMap.$enchantedPalette, "HCLSOFTWAREBLUE07_DARK");
        color: map.get(themeMap.$enchantedPalette, "HCLSOFTWAREBLUE07_DARK");
    }

    &[type="outlined"]::part(fab):focus,
    &[type="outlined"]::part(fab-rtl):focus{
        outline: 2px solid map.get(themeMap.$enchantedPalette, "HCLSOFTWAREBLUE06");
        border: 2px solid map.get(themeMap.$enchantedPalette, "HCLSOFTWAREBLUE07_DARK");
        outline-offset: 1px;
        border-radius: 7px;
    }

    &[type="outlined"]::part(fab):hover:focus,
    &[type="outlined"]::part(fab-rtl):hover:focus{
        background: palette.clr(light, action, hover);
        outline: 2px solid map.get(themeMap.$enchantedPalette, "HCLSOFTWAREBLUE06");
        outline-offset: 1px;
        border-radius: 7px;
        color: map.get(themeMap.$enchantedPalette, "HCLSOFTWAREBLUE07_DARK");
    }

    // Disabled FAB styles
    &::part(fab):disabled,
    &::part(fab-rtl):disabled{
        background: map.get(themeMap.$enchantedPalette, "NG150");
        color: map.get(themeMap.$enchantedPalette, "BLACK38P");
        outline: none;
        box-shadow: #{map.get(themeMap.$enchantedPalette, shadows16)};
        cursor: not-allowed;
    }

    &::part(fab):disabled:hover,
    &::part(fab):disabled:focus,
    &::part(fab-rtl):disabled:hover,
    &::part(fab-rtl):disabled:focus{
        background: map.get(themeMap.$enchantedPalette, "NG150") ;
        box-shadow: #{map.get(themeMap.$enchantedPalette, shadows16)};
        color: map.get(themeMap.$enchantedPalette, "BLACK38P");
    }
}