@use "../../../1-settings/settings-index";
@use "../../../1-settings/class-vars";
@use "../../../1-settings/spacing";
@use "../../../7-utilities/animation";

#{class-vars.$base-class} {
  .modal{
    &-backdrop {
      position: fixed;
      width: 100vw;
      height: 100vh;
      top: 0;
      left: 0;
      z-index: 4000;
      overflow: auto;
    }

    &__wrapper {
      animation: 400ms ease-in-out 100ms drop-in both;
      background: #fff;
      display: inline-block;
      max-width: 660px;
      width: calc(100% - var(--spacing-3xl));
      border-radius: var(--radius-medium);
      left: 50%;
      margin: var(--spacing-4xl) 0;
      overflow: hidden;
      padding: 0;
      position: absolute;
      top: 0;
      transform: translateX(-50%);
      z-index: 5000;
    }

    &__title {
      font-weight: var(--font-weight-bold);
      font-size: var(--font-size-2xl);
      padding: var(--spacing-xs) calc(var(--spacing) + 1.4rem) var(--spacing-xs) var(--spacing-l);
    }

    &__content {
      padding: var(--spacing-xs) var(--spacing-l);
    }

    &__footer {
      padding: var(--spacing-xs) var(--spacing-l) var(--spacing);
    }

    &__close-button {
      position: absolute;
      top: var(--spacing-2xs);
      right: var(--spacing-2xs);

      .utds-icon-before-x-icon::before {
        font-size: 0.7rem;
      }
    }

    &--small {
      max-width: 440px;
      border-radius: var(--radius-small);
    }

    &--large {
      max-width: 990px;
      border-radius: var(--radius-large);
    }
  }
}