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

$transition-fast: 0.3s ease;
$icon-gap: 8px;

@mixin enchanted-accordion-base-styles {
  display: block;

  &::part(container),
  &::part(container-rtl) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    background-color: transparent;
    user-select: none;
    max-width: 100%;
    box-sizing: border-box;
    font: inherit;
    transition: background-color $transition-fast, min-height $transition-fast;
    gap: $icon-gap;
  }
  &::part(container-rtl) {
    text-align: right;
  }

  &:hover::part(container),
  &:hover::part(container-rtl) {
    background-color: palette.clr("light", "action", "hover");
  }

  &:not([disabled])::part(container),
  &:not([disabled])::part(container-rtl) {
    min-height: 10px;
    background-color: map.get(themeMap.$enchantedPalette, WHITE100P);
  }

  &[disabled]::part(container),
  &[disabled]::part(container-rtl) {
    min-height: 10px;
    background-color: transparent;
    @include typography.body2;
    color: map.get(themeMap.$enchantedPalette, BLACK60P);
  }

  &[disabled]::part(label-text),
  &[disabled]::part(arrow-icon),
  &[disabled]::part(arrow-icon-rtl),
  &[disabled]::part(label-text-rtl) {
    @include typography.body2;
    color: map.get(themeMap.$enchantedPalette, BLACK60P);
  }

  &[disabled]::part(secondary-text),
  &[disabled]::part(secondary-text-rtl) {
    @include typography.body2;
    color: map.get(themeMap.$enchantedPalette, BLACK38P);
  }

  &::part(header-scss),
  &::part(header-scss-rtl) {
    display: flex;
    align-items: center;
    flex-grow: 1;
    gap: $icon-gap;
    flex-direction: row;
    text-align: left;
    padding: 6px 4px;
  }
  &::part(header-scss-rtl) {
    flex-direction: row-reverse !important;
    direction: ltr;
    text-align: right;
  }

  &::part(label-column),
  &::part(label-column-rtl) {
    @include typography.body2;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    cursor: pointer;
    padding: 0 4px;
    align-items: flex-start;
    text-align: left;
  }
  &::part(label-column-rtl) {
    align-items: flex-end; // Adjusted for RTL
    text-align: right !important; // Adjusted for RTL
  }

  &::part(label-text),
  &::part(label-text-rtl) {
    @include typography.body2;
    color: map.get(themeMap.$enchantedPalette, BLACK87P);
  }

  &::part(arrow-icon),
  &::part(arrow-icon-rtl) {
    display: flex;
    align-items: center;
    transition: transform $transition-fast ease;
    line-height: 1;
    color: map.get(themeMap.$enchantedPalette, BLACK100P);
    padding: 0px 20px;
  }

  &::part(secondary-text),
  &::part(secondary-text-rtl) {
    font-size: 10px;
    color: map.get(themeMap.$enchantedPalette, BLACK55P);
    font-weight: 400;
    text-align: left;
  }
  &::part(secondary-text-rtl) {
    text-align: right !important;
  }

  &[open] {
    &::part(arrow),
    &::part(arrow-rtl) {
      transform: rotate(180deg);
    }

    &::part(accordion-content),
    &::part(accordion-content-rtl) {
      display: block;
      padding: 12px 12px;
    }
  }

  &:not([open]) {
    &::part(arrow),
    &::part(arrow-rtl) {
      transform: rotate(0deg);
    }
    &::part(accordion-content),
    &::part(accordion-content-rtl) {
      display: none;
      padding: 0 16px;
      background-color: transparent;
    }
  }

  &[type="outlined"] {
    border: 1px solid map.get(themeMap.$enchantedPalette, NG300);
    overflow: hidden;
    background-color: palette.clr('light', 'background', 'paper');
    &:first-of-type {
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }
    &:last-of-type {
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
    }
  }
  // Avoid doubled borders where two outlined accordions sit directly next to each other.
  &[type="outlined"] + &[type="outlined"] {
    border-top: none;
  }
  &[type="no-outline"] {
    border: none;
  }

  &:hover::part(container),
  &:hover::part(container-rtl) {
    background-color: palette.clr("light", "action", "hover");
  }
}