ujiro99/tlt

@import '../css/mixin.css';

.ReactModalPortal {
  position: relative;
  z-index: 11;
}

.modal-window {
  @apply drop-shadow-xl;
  @apply rounded-md;
  @apply bg-white;
  @apply text-base;

  color: var(--text-600);
  position: absolute;
  top: 30%;
  left: 50%;
  right: auto;
  bottom: auto;
  margin-right: -50%;
  padding: 1rem 2rem 1.6rem;
  transform: translate(-50%, -30%);

  &-header {
    padding: 10px 0 20px;
  }

  &-header > h2 {
    @apply text-lg;
    font-weight: bold;
  }

  &-header__close {
    position: absolute;
    top: 4px;
    right: 4px;

    .icon-button__icon {
      width: 22px;
      height: 22px;
    }
  }

  &__section {
    width: 326px;
  }

  &__section + &__section {
    margin-top: 24px;
  }

  &__section-title {
    @mixin section-title;
    font-size: 1rem;

    & > .Icon {
      @apply fill-gray-400;
      display: inline-block;
      width: 22px;
      height: 20px;
      margin-right: 4px;
      margin-bottom: 2px;
    }
  }
}