@use "sass:map";
@use "@naomi-2025/ui-core/site-config";
@use "@naomi-2025/ui-core/colors";
@use "@naomi-2025/ui-core/maps";
@use "@naomi-2025/ui-core/mq";
@use "@naomi-2025/ui-core/text-styles";
@use "s360-scss-toolkit";

.modal {
  [data-site-mode="at-work"] & {
    @include s360-scss-toolkit.box-shadow(2, map.get(maps.$site-mode-at-work, 'highlight-color'));
  }
  [data-site-mode="at-play"] & {
    @include s360-scss-toolkit.box-shadow(2, map.get(maps.$site-mode-at-play, 'highlight-color'));
  }

  background-color: var(--bg-color);
  padding: site-config.spacer(3);
  container-type: inline-size;
  height: var(--modal--height, auto);
  left: var(--modal--left, 0);
  max-height: var(--modal--max-height, none);
  overflow-y: var(--modal--overflow, auto);
  position: var(--modal--position, fixed);
  top: var(--modal--top, var(--drupal-displace-offset-top, 0));
  transition: all 250ms ease-out allow-discrete;
  width: var(--modal--width, auto);
  container-type: inline-size;
  border: 1px solid var(--highlight-color);

  &__titlebar {
    display: flex;
    padding-bottom: site-config.spacer(2);
  }

  &__title {
    @extend %text-style-h2;
  }

  &__close {
    // --focus-visible--outline-color: #{ colors.$blue-medium };

    aspect-ratio: 1 / 1;
    position: relative;
    margin-left: auto;

    &::after,
    &::before {
      border-top: 2px var(--button--color) solid;
      content:'';
      left: 0;
      position: absolute;
      right: 0;
      rotate: var(--modal-close--rotation, 45deg);
      top: 50%;
      transition: all 200ms ease-in-out;
      translate: 0 -50%;
    }

    &::after {
      --modal-close--rotation: -45deg;
    }

    &:focus-visible,
    &:hover {
      &::before,
      &::after {
        // --modal-close--border-color: #{ colors.$blue-medium };
      }

      &::before {
        --modal-close--rotation: 0deg;
      }

      &::after {
        --modal-close--rotation: 0deg;
      }
    }
  }

  &--ajax {
    --modal--left: 50%;
    --modal--max-height: calc(95dvh - var(--drupal-displace-offset-top, 0px));
    --modal--top: calc(50% + var(--drupal-displace-offset-top, 0px) * 0.5);
    --modal--width: 90%;

    translate: -50% -50%;
    z-index: 103;

    @media (width > mq.$mq-896) {
      --modal--width: 900px;
    }
  }

  ~ .ui-widget-overlay {
    background: color-mix(in srgb, var(--bg-color), transparent 60% );
  }
}
