$vl-modal-width: 60rem;
$vl-modal-width--medium: 80rem;
$vl-modal-width--large: 100rem;
$vl-modal-padding: 3rem;
$vl-modal-padding-small: 1.5rem;
$vl-modal-content-padding: 1.5rem;

.vl-modal {
  .vl-action-group {
    margin-top: 1.5rem;
  }

  .backdrop,
  .vl-modal__backdrop {
    @include backdrop;
  }
}

.vl-modal-dialog {
  display: none;
  position: fixed;
  width: $vl-modal-width;
  max-width: 95vw;
  max-height: 95vh;
  top: 50%;
  left: 50%;
  margin: 0;
  padding: 3rem;
  transform: translate(-50%, -50%);
  background-color: $vl-white;
  border: 0;
  box-shadow: $vl-base-box-shadow;
  overflow: auto;
  z-index: z("modal");

  &::backdrop {
    @include backdrop;
  }

  &[open] {
    display: block;

    &:focus {
      outline: auto $vl-outline-color 3px;
    }
  }

  &--static {
    position: static;
    transform: none;
  }

  &--medium {
    width: $vl-modal-width--medium;
  }

  &--large {
    width: $vl-modal-width--large;
  }

  @include respond-to(small) {
    padding: $vl-modal-padding-small;
  }
}

.vl-modal-dialog__title {
  font-weight: 500;
  font-family: $vl-accent-font;
  font-size: 2rem;
  margin-bottom: $vl-modal-content-padding;
}

.vl-modal-dialog__close {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  padding: 1rem;
  border: 0;
  background: none;
  line-height: 1;
  overflow: hidden;

  &:hover &,
  &:focus & {
    &__icon {
      color: $vl-action-color;
    }
  }

  @include respond-to(small) {
    top: 0;
    right: 0;
  }

  &__icon {
    @include vi;
    @include vi-cross;
    display: flex;
    font-size: 1.4rem;
    line-height: 1;

    &.vl-icon {
      margin-right: 0;
    }
  }
}