$border: 1px solid color('neutral-5');

.modal {
  margin: rem-calc(60px) auto rem-calc(60px);
  background-color: color('primary-2');

  &:focus,
  &:active {
    outline: none;
  }

  &.simple {
    max-width: rem-calc(728);
  }

  &.large,
  &.mobile-large {
    max-width: rem-calc(940);
    z-index: 2000;
  }

  &.x-large {
    max-width: rem-calc(1152);
    z-index: 2000;
  }

  &.mobile {
    margin-top: 0;
    max-width: rem-calc(604);
    z-index: 2000;

    .section {
      padding: ru(1.25);
    }

    .header {
      padding: ru(1.25);
    }
  }
}

.dialog {
  @include font-family-b;
  position: relative;
  z-index: 9999;
  max-width: 100vw;
  margin: auto;
  border: $border;
  overflow: hidden;
}

.close-col {
  text-align: right;
}

.close {
  margin: 0 auto;
  width: ru(1);
  height: ru(1);
}

.body {
  background-color: color('primary-2');
}

.header {
  padding: rem-calc(36px) rem-calc(24px) 0;
}

.section {
  border-bottom: 1px solid color('neutral-6');
  padding: rem-calc(36px) rem-calc(24px);

  &:last-child {
    border-bottom: 0;
  }
}

.overlay {
  background-color: color('transparent-neutral-2');
  z-index: 2100;
  transition: opacity 0.25s ease-in-out, background 0.25s ease-out;
  background: color('transparent-neutral-2');
  bottom: 0;
  display: block;
  left: 0;
  opacity: 1;
  overflow: auto;
  position: fixed;
  right: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
}

@media #{$small-only} {
  .modal {
    margin: rem-calc(60px) ru(1) rem-calc(60px);
  }

  .header {
    p {
      width: calc(10 / 12 * 100%);
    }
  }

  .mobile,
  .mobile-large {
    padding: 0;
    margin: 0;
  }

  .x-large {
    padding: 0;
    margin-top: rem-calc(60);
  }
}

@media #{$tablet} {
  .header,
  .section {
    padding-left: rem-calc(48px);
    padding-right: rem-calc(48px);
  }
}