@keyframes fadeModal {
  0% {
    opacity: 0;
  }
  25% {
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.ebs-modal__wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  outline: 0;
  z-index: 9998;
}

.ebs-modal {
  @include elevation-4;
  position: relative;
  margin: rem(150px auto $gutter-size);
  border: 1px solid $border-color;
  border-radius: rem($border-radius);
  background-color: $background-content;
  animation: 250ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s 1 normal forwards running fadeModal;

  &--small {
    width: 100%;
    max-width: rem(550px);
  }

  &--regular {
    width: 100%;
    max-width: rem(760px);
  }

  &--large {
    width: 100%;
    max-width: rem(960px);
  }

  &--hide-header &__content {
    padding: rem($base-size);
  }

  &__header {
    position: relative;
    padding: rem($gutter-size);
    border-bottom: 1px solid $border-color;
    background-color: $white;

    &-container {
      margin-right: calc(#{rem($base-size)} + #{rem($gutter-size)} / 2);
    }

    &--close {
      position: absolute;
      top: 50%;
      right: rem($gutter-size);
      transform: translate3d(0, -50%, 0);
      border-radius: rem($border-radius);
      color: $black;
    }
  }

  &__content {
    padding: rem($gutter-size);
  }

  &__title {
    font-size: rem(14px);
    @include fontMedium;
    margin: 0;
    padding: 0;
  }

  &__footer {
    padding: rem($gutter-size);
    border-top: 1px solid $border-color;
    background-color: $white;

    &__button {
      display: flex;
      justify-content: space-between;

      &--flex {
        display: flex;
        align-items: center;

        > * {
          display: block;
          white-space: nowrap;

          &:first-child {
            width: 100%;
          }

          &:last-child {
            width: auto;
          }

          > *:not(:first-child) {
            margin-left: rem($gutter-size);
          }
        }
      }

      &--center {
        text-align: center;

        .ebs-button__wrapper:last__child {
          margin-left: rem($gutter-size);
        }
      }

      > div:not(:first-child),
      > div:not(:first-child) > div:not(:first-child) {
        margin-left: rem($gutter-size);
      }
    }
  }
}
