/* ======================================================================== *
 * 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";

@mixin enchanted-alert-base-styles {
  &::part(alert-div-root) {
    display: flex;
    flex-direction: row;
    opacity: 1;
    transform: none;
    transition: opacity 228ms cubic-bezier(0.4, 0, 0.2, 1), transform 152ms cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: 0px 0px;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 4px;
    outline: 0px;
    padding: 4px 8px;
    align-items: flex-start;
    gap: 8px;
  }

  &::part(alert-contained-success) {
    border: 1px solid map.get(themeMap.$enchantedPalette, GREEN800);
    color: map.get(themeMap.$enchantedPalette, GREEN800);
    background-color: palette.clr(light, background, success);
    @include typography.body2;
  }

  &::part(alert-outlined-success) {
    border: 1px solid map.get(themeMap.$enchantedPalette, GREEN800);
    color: map.get(themeMap.$enchantedPalette, GREEN800);
    background-color: palette.clr(light, background, paper);
    @include typography.body2;
  }

  &::part(alert-contained-warning) {
    border: 1px solid map.get(themeMap.$enchantedPalette, ORANGE800);
    color: map.get(themeMap.$enchantedPalette, ORANGE800);
    background-color: palette.clr(light, background, warning);
    @include typography.body2;
  }

  &::part(alert-outlined-warning) {
    border: 1px solid map.get(themeMap.$enchantedPalette, ORANGE800);
    color: map.get(themeMap.$enchantedPalette, ORANGE800);
    background-color: palette.clr(light, background, paper);
    @include typography.body2;
  }

  &::part(alert-contained-info) {
    border: 1px solid map.get(themeMap.$enchantedPalette, BLUE800);
    color: map.get(themeMap.$enchantedPalette, BLUE800);
    background-color: palette.clr(light, background, info);
    @include typography.body2;
  }

  &::part(alert-outlined-info) {
    border: 1px solid map.get(themeMap.$enchantedPalette, BLUE800);
    color: map.get(themeMap.$enchantedPalette, BLUE800);
    background-color: palette.clr(light, background, paper);
    @include typography.body2;
  }

  &::part(alert-contained-error) {
    border: 1px solid map.get(themeMap.$enchantedPalette, RED800);
    color: map.get(themeMap.$enchantedPalette, RED800);
    background-color: palette.clr(light, background, error);
    @include typography.body2;
  }

  &::part(alert-outlined-error) {
    border: 1px solid map.get(themeMap.$enchantedPalette, RED800);
    color: map.get(themeMap.$enchantedPalette, RED800);
    background-color: palette.clr(light, background, paper);
    @include typography.body2;
  }

  &::part(alert-svg-success) {
    color: map.get(themeMap.$enchantedPalette, GREEN800);
  }

  &::part(alert-svg-error) {
    color: map.get(themeMap.$enchantedPalette, RED800);
  }

  &::part(alert-svg-warning) {
    color: map.get(themeMap.$enchantedPalette, ORANGE800);
  }

  &::part(alert-svg-info) {
    color: map.get(themeMap.$enchantedPalette, BLUE800);
  }

  &::part(alert-content) {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  &::part(alert-title) {
    font-weight: 700;
  }
}