@use './breakpoint';
@use './overlay';

$ods-modal-border-radius: var(--ods-border-radius-sm);
$ods-modal-header-height: 32px;
$ods-modal-margin: 16px;
$ods-modal-size: 512px;

@mixin animation-mixin($name) {
  @keyframes modal-open {
    0% {
      transform: scale(0.8);
      opacity: 0;
    }

    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes modal-close {
    0% {
      transform: scale(1);
      opacity: 1;
    }

    100% {
      transform: scale(0.9);
      opacity: 0;
    }
  }
}

@mixin ods-modal() {
  display: flex;
  position: fixed;
  flex-flow: column;
  z-index: overlay.$ods-overlay-modal-z-index;
  margin: auto $ods-modal-margin;
  outline: none;
  border: none;
  border-radius: $ods-modal-border-radius;
  background: var(--ods-color-neutral-000);
  padding: 0;
  width: 100%;
  min-width: 320px;
  max-width: calc(100% - ($ods-modal-margin * 2));
  min-height: 100px;
  max-height: calc(100% - ($ods-modal-margin * 2));
  overflow: hidden;

  &::backdrop {
    opacity: 0.75;
    background-color: #0050d7;
    // We're not using variables because of a Chromium issue with the backdrops
    // See https://stackoverflow.com/questions/58818299/css-variables-not-working-in-dialogbackdrop/63322762#63322762
  }

  @media screen and (width >= (breakpoint.$ods-breakpoint-mobile)) {
    margin: auto;
    max-width: $ods-modal-size;
    max-height: $ods-modal-size;
  }
}

@mixin ods-modal-header() {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-end;
  padding: 4px;
  width: 100%;
  height: $ods-modal-header-height;
  overflow: hidden;
}

@mixin ods-modal-color($color) {
  @if $color == 'critical' {
    background-color: var(--ods-color-critical-100);
  } @else if $color == 'information' {
    background-color: var(--ods-color-primary-100);
  } @else if $color == 'neutral' {
    background-color: var(--ods-color-neutral-100);
  } @else if $color == 'success' {
    background-color: var(--ods-color-success-100);
  } @else if $color == 'warning' {
    background-color: var(--ods-color-warning-100);
  }
}

@mixin ods-modal-close-button() {
  display: inherit;
  align-items: center;
}

@mixin ods-modal-close-button-color($color) {
  @if $color == 'critical' {
    color: var(--ods-color-critical-500);

    &:hover, &:focus-visible {
      background-color: var(--ods-color-critical-200);
    }

    &:active {
      background-color: var(--ods-color-critical-300);
    }
  } @else if $color == 'information' {
    color: var(--ods-color-primary-600);

    &:hover, &:focus-visible {
      background-color: var(--ods-color-primary-200);
    }

    &:active {
      background-color: var(--ods-color-primary-300);
    }
  } @else if $color == 'neutral' {
    color: var(--ods-color-neutral-600);

    &:hover, &:focus-visible {
      background-color: var(--ods-color-neutral-200);
    }

    &:active {
      background-color: var(--ods-color-neutral-300);
    }
  } @else if $color == 'success' {
    color: var(--ods-color-success-900);

    &:hover, &:focus-visible {
      background-color: var(--ods-color-success-200);
    }

    &:active {
      background-color: var(--ods-color-success-300);
    }
  } @else if $color == 'warning' {
    color: var(--ods-color-warning-900);

    &:hover, &:focus-visible {
      background-color: var(--ods-color-warning-200);
    }

    &:active {
      background-color: var(--ods-color-warning-300);
    }
  }
}

@mixin ods-modal-content() {
  display: flex;
  flex-direction: column;
  padding: 24px;
  width: 100%;
  overflow-y: auto;
}

@mixin ods-modal-actions() {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: flex-end;
  width: 100%;
}