hugo-theme-zzo/assets/sass/components/_modal.scss

.modal {
  &__overlay {
    z-index: z('modal');
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    @include flexbox();
    @include justify-content(center);
    @include align-items(center);
  }

  &__container {
    background-color: transparent;
    border-radius: 0.25rem;
    overflow-y: auto;
    box-sizing: border-box;
    position: relative;
  }

  &__content {
    margin: auto;
    position: relative;
  }

  &__header {
    position: absolute;
    top: 0;
    width: 100%;
    height: 50px;
    background: rgba(0,0,0,0.45);
  }

  &__caption {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100%;
    background: rgba(0,0,0,0.45);

    @include no-select;
    @include translateX(-50%);

    &--text {
      text-align: center;
      font-family: $title-font;
      font-size: 14px;
      padding: 0.5rem;
      width: 40%;
      height: auto;
      margin: 0 auto;
    }
  }

  &__paging {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    padding: 0.8rem;
    height: auto;
    font-family: $title-font;
    font-size: 16px;
    background: transparent;

    @include no-select;
  }

  &__icon {
    margin: 0;
    padding: 0.4rem;
    position: absolute;
    overflow: hidden;
    cursor: pointer;
    border-radius: 0.25rem;

    @include flexbox();
    @include align-items(center);
    @include justify-content(center);
  }

  &__toolbar {
    @include themify($themes) {
      color: themed('gtt-color');

      @include on-event {
        color: themed('gtt-hover-color');
        background: rgba(0,0,0,0.4);
      }
    }
    
    &--close {
      top: 0.4rem;
      right: 0.25rem;
    }

    &--full {
      top: 0.4rem;
      right: 2.8rem;
    }

    &--normal {
      top: 0.4rem;
      right: 2.8rem;
    }
  }

  &__arrow {
    @include themify($themes) {
      color: themed('gtt-color');
      background: rgba(0,0,0,0.45);

      @include on-event {
        color: themed('gtt-hover-color');
        background: rgba(0,0,0,0.5);
      }
    }

    &--left {
      left: 0.5rem;
      top: 50%;
      @include translateY(-50%);
    }

    &--right {
      right: 0.5rem;
      top: 50%;
      @include translateY(-50%);
    }
  }
}

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

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

@keyframes mmslideIn {
  from { transform: translateY(4%); }
    to { transform: translateY(0); }
}

@keyframes mmslideOut {
    from { transform: translateY(0); }
    to { transform: translateY(-2%); }
}

.micromodal-slide {
  display: none;
}

.micromodal-slide.is-open {
  display: block;
}

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

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

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

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

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