.modal {

  .modal__overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: $background-modal;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    padding: 16px;
  }

  .modal__container {
    background-color: #fff;
    padding: 16px 24px;
    max-width: 800px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    position: relative;
    @include media-breakpoint-up(md) {
      padding: 28px 48px;
    }
    @include media-breakpoint-up(lg) {
      padding: 48px 88px;
    }
  }

  .modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    @include media-breakpoint-up(md) {
      padding-right: 48px;
    }
  }
  .modal__title {
    margin: 0 map-get($spacers, 8) 0 0;
  }

  .modal__content {
    margin-top: 8px;
    & > *:first-child{
      margin-top: 0;
    }
  }

  .modal__footer{
    margin-top: 16px;
    @include media-breakpoint-up(lg) {
      display: flex;
    }
    .button {
      margin-top: map-get($spacers, 3);
      margin-right: map-get($spacers, 4);
    }
  }

  .modal__close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: inherit;
    @include media-breakpoint-up(md) {
      top:map-get($spacers, 5);
      right: map-get($spacers, 6);
    }
  }

  /**************************\
        Animation Style
    \**************************/
  @keyframes modalfadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes modalfadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
  }

  @keyframes modalslideIn {
    from { transform: translateY(15%); }
    to { transform: translateY(0); }
  }

  @keyframes modalslideOut {
    from { transform: translateY(0); }
    to { transform: translateY(-10%); }
  }

  display: none;

  &.is-open {
    display: block;
  }

  &[aria-hidden="false"] .modal__overlay {
    animation: modalfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
  }

  &[aria-hidden="false"] .modal__container {
    animation: modalslideIn .3s cubic-bezier(0, 0, .2, 1);
  }

  &[aria-hidden="true"] .modal__overlay {
    animation: modalfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
  }

  &[aria-hidden="true"] .modal__container {
    animation: modalslideOut .3s cubic-bezier(0, 0, .2, 1);
  }

  & .modal__container,
  & .modal__overlay {
    will-change: transform;
  }
}