/*
 ********************************************************************
 * Licensed Materials - Property of HCL                             *
 *                                                                  *
 * Copyright HCL Technologies Ltd. 2025. All Rights Reserved.       *
 *                                                                  *
 * Note to US Government Users Restricted Rights:                   *
 *                                                                  *
 * Use, duplication or disclosure restricted by GSA ADP Schedule    *
 ********************************************************************
 */

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

@mixin enchanted-popover-base-styles {
    &::part(wrapper) {
        position:absolute;
        inline-size: fit-content;
        max-inline-size: 274px;
        min-inline-size: 119px;
        min-height: 66px;
        block-size: auto;
        border-radius: 4px;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease, visibility 0.2s ease, width 0.2s ease, height 0.2s ease;
        z-index: 100;
        box-sizing: border-box;
        background-color: palette.clr('light', 'background', 'paper');
        box-shadow: #{map.get(themeMap.$enchantedPalette, shadows4)};
        overflow: visible;
    }

    &[open]::part(wrapper) {
        opacity: 1;
        visibility: visible;
    }

    // Light theme (default - when inverse is false or not set)
    &:not([inverse])::part(wrapper) {
        background-color: palette.clr('light', 'background', 'paper');
        color: map.get(themeMap.$enchantedPalette, BLACK87P);
    }

    &:not([inverse])::part(arrow) {
        background-color: palette.clr('light', 'background', 'paper');
    }

    // Dark theme (when inverse is true)
    &[inverse]::part(wrapper) {
        background: palette.clr(dark, background, secondary);
        color: map.get(themeMap.$enchantedPalette, WHITE100P);
        box-shadow: #{map.get(themeMap.$enchantedPalette, shadows4)};
    }
    
    &[inverse]::part(arrow) {
        background: palette.clr(dark, background, secondary);
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    }

    &[inverse]::part(container),
    &[inverse]::part(label),
    &[inverse]::part(text),
    &[inverse]::part(close-icon),
    &[inverse]::part(close-icon-rtl)
    {
        color: map.get(themeMap.$enchantedPalette, WHITE100P);
        background: transparent;
    }

    &::part(container),
    &::part(container-rtl) {
        inline-size: max-content;
        max-inline-size: 274px;
        position: relative;
        box-sizing: border-box;
        overflow: visible ;
    }

    &::part(content) {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 8px;
        inline-size: calc(100% - 40px);
    }

    &[withpadding]::part(container),
    &[withpadding]::part(container-rtl) {
        padding: 10px;
    }

    &:not([withpadding])::part(container),
    &:not([withpadding])::part(container-rtl) {
        padding: 0;
    }
   
    &:not([arrow])::part(wrapper),
    &[arrow='']::part(wrapper) {
        top: calc(100% + 8px);
        left: 50%;
        transform: translate(-50%, 0px);
    }

    &::part(close-icon),
    &::part(close-icon-rtl) {
        position: absolute;
        background: transparent;
        top: 12px;
        border: none;
        width: 20px;
        height: 20px;
        cursor: pointer;
        border-radius: 2px;
        padding: 2px;
        z-index: 100;
    }

    &::part(close-icon) {
        right: 12px;
        left: auto;
    }

    &::part(close-icon-rtl) {
        right: auto;
        left: 12px;
    }

    &::part(label) {
        @include typography.subtitle1;
        min-inline-size: 119px;
        min-block-size: 22px;
        max-inline-size: 24;
        inline-size: 100%;
        block-size: auto;
       
        color: map.get(themeMap.$enchantedPalette, BLACK87P);
        overflow-wrap: anywhere;
        white-space: normal;
        word-break: break-word;
    }

    &::part(text) {
        @include typography.body2;
        min-inline-size: 111px;
        min-block-size: 16px;
        max-inline-size: 274px;
        inline-size: 100%;
        block-size: auto;
        color: map.get(themeMap.$enchantedPalette, BLACK87P);
        opacity: 1;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    &::part(container-rtl) {
        direction: rtl;
        text-align: right;
        align-items: flex-end;
        display: flex;
    } 
  
    &::part(arrow) {
      height: 8px;
      position: absolute;
      background: inherit;
      clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
      width: 16px;
    }

    &:not([showLabel]):not([showText])::part(wrapper) {
        display: none;
    }
    &[showLabel]:not([showText])::part(wrapper) {
        min-height: 42px;
    }
    &:not([showLabel])[showText]::part(wrapper) {
        min-height: 36px;
    }


    &[arrow="12:00"]::part(wrapper) {
        top: 100%;
        left: 50%;
        transform: translate(-50%, 8px);
    }

    &[arrow='12:00']::part(arrow) {
        top: -(8px);
        left: calc(50% - (16px / 2));
        transform: rotate(0deg);    
    }

    &[arrow="1:00"]::part(wrapper) {
        right: -18px;
        top: 100%;
        transform-origin: right top;
        transform: translateY(8px);
    }

    &[arrow="1:00"]::part(arrow) {
        top: -8px;
        right: 18px;
        transform: rotate(0)
    }

    &[arrow="2:00"]::part(wrapper) {
        right: 100%;
        top: -18px;
        transform-origin: top right;
        transform: translateX(-8px);
    }

    &[arrow="2:00"]::part(arrow) {
        top: 18px;
        right: -12px;
        transform: rotate(90deg)
    }

    &[arrow="3:00"]::part(wrapper) {
        right: 100%;
        top: 50%;
        transform: translate(-8px, -50%);
    }
    &[arrow="3:00"]::part(arrow) {
        top: calc(50% - (8px / 2));
        right: -12px;
        transform: rotate(90deg);   
    }

    &[arrow="4:00"]::part(wrapper) {
        bottom: -12px;
        right: 100%;
        transform-origin: bottom right;
        transform: translateX(-8px);
    }

    &[arrow="4:00"]::part(arrow) {
        bottom: 12px;
        right: -12px;
        transform: rotate(90deg)
    }


    &[arrow="5:00"]::part(wrapper) {
        bottom: 100%;
        right: -18px;
        transform-origin: right bottom;
        transform: translateY(-8px);
    }

    &[arrow="5:00"]::part(arrow) {
        bottom: -8px;
        right: 12px;
        transform: rotate(180deg);
    }

    &[arrow='6:00']::part(wrapper) {
        bottom: 100%;
        left: 50%;
        transform: translate(-50%, -8px);
    }

    &[arrow='6:00']::part(arrow) {
        bottom: -8px;
        left: calc(50% - (16px / 2));
        transform: rotate(180deg);
    }

    &[arrow="7:00"]::part(wrapper) {
        left: -18px;
        bottom: 100%;
        transform-origin: left bottom;
        transform: translateY(-8px);
    }

    &[arrow="7:00"]::part(arrow) {
        bottom: -8px;
        left: 12px;
        transform: rotate(180deg)
    }

    &[arrow="8:00"]::part(wrapper) {
        left: 100%;
        bottom: -12px;
        transform-origin: bottom left;
        transform: translateX(8px);
    }

    &[arrow="8:00"]::part(arrow) {
        bottom: 12px;
        left: -12px;
        transform: rotate(270deg)
    }

    &[arrow="9:00"]::part(wrapper) {
        left: 100%;
        top: 50%;
        transform: translate(8px, -50%);
    }

    &[arrow='9:00']::part(arrow) {
        top: calc(50% - (8px / 2));
        left: -12px;
        transform: rotate(270deg);
    }

    &[arrow="10:00"]::part(wrapper) {
        top: -18px;
        left: 100%;
        transform-origin: top left;
        transform: translateX(8px)
    }

    &[arrow="10:00"]::part(arrow) {
        top: 18px;
        left: -12px;
        transform: rotate(270deg);
    }
    &[arrow="11:00"]::part(wrapper) {
        top: 100%;
        left: -18px;
        transform-origin: left top;
        transform: translateY(8px)
    }

    &[arrow="11:00"]::part(arrow) {
        top: -8px;
        left: 12px;
        transform: rotate(0)
    }
}