$modal-border-radius: 3px;
$modal-padding: 1em;

$modal-sizes: (
  small: (
    class-name: 'sm',
    width: 375px,
    max-height: 400px
  ),
  medium: (
    class-name: 'md',
    width: 450px,
    max-height: 450px
  ),
  large: (
    class-name: 'lg',
    width: 800px,
    max-height: 800px
  ),
  x-large: (
    class-name: 'x-lg',
    width: calc(100vw - 2em),
    max-height: calc(100vh - 2em)
  )
);

%modal {
  @include center();
  @include shadow(3);

  position: fixed;
  background: $white;
  border-radius: $modal-border-radius;
  z-index: $zIndex-10;
  max-width: calc(100vw - 1em);
}

.vinli-modals {
  &__overlay {
    @include abs-overlay();

    background-color: rgba(palette(blue, x-dark), 0);
    transition: background-color 0.5s ease;
    position: fixed;
    z-index: 1000;

    &.animate-in {
      background-color: rgba(palette(blue, x-dark), 0.6);
    }
  }

  &__modal {
    @extend %modal;
  }
}

.modal {
  &__header {
    background: palette(blue, xx-dark);
    border-radius: $modal-border-radius $modal-border-radius 0 0;
    color: $white;
    padding: $modal-padding;
    position: relative;
    text-align: center;
  }

  &__title {
    font-size: font-size(title, small) + 0;
    font-weight: font-weight(light);
    text-transform: uppercase;
    margin: 0;
  }

  &__body {
    max-height: 390px;
    overflow: auto;

    &__container {
      padding: $modal-padding;

      @include gmq(desk) {
        padding: $modal-padding * 1.5;
      }

      .center {
        text-align: center;
      }
    }
  }

  &__footer {
    display: flex;

    .btn {
      flex: 1;
      font-size: font-size(body);

      &:first-child {
        border-radius: 0 0 0 $modal-border-radius;
      }

      &:last-child {
        border-radius: 0 0 $modal-border-radius 0;
      }
    }
  }
}

// Modal Sizes // --------------------
@each $item, $size in $modal-sizes {
  $class: map-get($size, class-name);
  $width: map-get($size, width);
  $maxHeight: map-get($size, max-height);

  .modal--#{$class} {
    width: $width;
    max-height: $maxHeight;
  }
}

.btn--modal {
  background: white;
  border-top: 1px solid palette(gray, x-light) !important;
  border: 0;
  color: palette(gray, dark);
  padding: $modal-padding;

  & + & {
    border-left: 1px solid palette(gray, x-light);
  }

  &--preferred {
    font-weight: 600;
  }

  &--danger {
    font-weight: 600;
    color: palette(red, salmon);
  }

  &--success {
    font-weight: 600;
    color: palette(green, bright);
  }
}