// sass-lint:disable class-name-format, no-color-literals
.ReactModalPortal {
  .mikoshi-modal {
    @include rules('m-shadow-5');
    position: absolute;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    border-radius: .6rem;

    &-overlay {
      @include rules('m-z-index-max');
      position: fixed;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      background-color: rgba(#000, .55);

      body.dark &,
      .app[data-theme='dark'] & {
        background-color: rgba(#000, .75);
      }
    }

    &-content {
      @include rules('m-frost-glass-light', 'm-color-grey-1', 'm-flex-column');
      max-height: 60vh;
      border-radius: .6rem;

      body.dark &,
      .app[data-theme='dark'] & {
        @include rules('m-frost-glass-dark', 'm-color-white');
      }

      .mikoshi-modal-header {
        @include rules('m-flex', 'm-flex-align-center', 'm-frost-glass-blue-1', 'm-color-grey-1');
        border-top-left-radius: .6rem;
        border-top-right-radius: .6rem;
        padding: .8rem 1rem;
        font-size: .9rem;
        font-weight: 400;

        body.dark &,
        .app[data-theme='dark'] & {
          @include rules('m-color-white');
        }
      }

      .mikoshi-modal-body {
        padding: 1rem;
      }

      .mikoshi-modal-footer {
        @include rules('m-flex-align-center');
        padding: 1rem;
        border-bottom-left-radius: .6rem;
        border-bottom-right-radius: .6rem;
      }
    }
  }

  .ReactModal__Overlay {
    @include rules('m-animation-transition');
    opacity: 0;
  }

  .ReactModal__Overlay--after-open {
    opacity: 1;
  }

  .ReactModal__Overlay--before-close {
    opacity: 0;
  }
}