$modal-size-variations: 'small' 25%, 'medium' 45%, 'large' 75% !default;

$modal-background: var(--color-white) !default;
$modal-color: var(--color-black) !default;
$modal-radius: 0 !default;
$modal-width: 600px !default;
$modal-padding: 1rem !default;
$modal-overlay-background: var(--color-black-overlay) !default;

.modal {
  --background-color: #{$modal-background};
  --font-color: #{$modal-color};
  --border-radius: #{$modal-radius};
  --width: #{$modal-width};
  --padding: #{$modal-padding};

  --overlay-background-color:  #{$modal-overlay-background};

  display: none;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  position: fixed;
  z-index: 100;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;

  &.is-active {
    display: flex;
  }

  &__background {
    background-color: var(--overlay-background-color);
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
  }

  &__content {
    background-color: var(--background-color);
    border-radius: 0;
    color: var(--font-color);
    padding: var(--padding);
    position: relative;
    overflow: inherit;
    width: 100%;

    @include medium {
      border-radius: var(--border-radius);
      width: var(--width);
      @each $size in $modal-size-variations {
        .modal.is-#{nth($size, 1)} > & {
          width: nth($size, 2);
        }
      }
    }

    .modal.is-full > & {
      border-radius: 0;
      flex: auto;
      width: 100%;
    }
  }

  &__close {
    position: absolute;
    right: 10px;
    top: 10px;
  }
}