@use "sass:map";

.vuiModalContainer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(12px);
  opacity: 0;
  transition: transform $transitionSpeed cubic-bezier(0, 1, 1, 1), opacity $transitionSpeed;
  pointer-events: none;
}

.vuiModalContainer-isLoaded {
  transform: translateY(0);
  opacity: 1;
}

.vuiModal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: calc(100% - $sizeM * 2);
  background-color: var(--vui-color-empty-shade);
  border-radius: $sizeXxs;
  z-index: $modalZIndex;
  pointer-events: none;
  box-shadow: rgba(57, 57, 75, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  transition: height $transitionSpeed, max-width $transitionSpeed, max-height $transitionSpeed;
}

.vuiModalContainer-isLoaded .vuiModal {
  pointer-events: all;
}

$size: (
  s: 500px,
  m: 900px,
  l: 1300px
);

@each $sizeName, $sizeValue in $size {
  .vuiModal--#{$sizeName} {
    max-width: $sizeValue;

    @media screen and (max-width: ($sizeValue + $sizeXl * 2)) {
      & {
        max-width: calc(100% - $sizeM * 2);
      }
    }
  }
}

.vuiModalHeader {
  padding: $sizeS $sizeM;
}

.vuiModalHeader__title {
  font-size: $fontSizeMedium;
  font-weight: $fontWeightBold;
  line-height: 1.2;
  color: var(--vui-color-text);
}

.vuiModalContent {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.vuiModalContent__inner {
  padding: 0 $sizeM $sizeL;
}

// Color
$color: (
  primary: (
    "color": var(--vui-color-primary-shade)
  ),
  danger: (
    "color": var(--vui-color-danger-shade)
  )
);

@each $colorName, $colorValue in $color {
  .vuiModal--#{$colorName} {
    .vuiModalHeader {
      .vuiIcon {
        color: #{map.get($colorValue, "color")};
      }
    }
  }
}