.media-modal {
  position: relative;

  @include size(100%);

  &__closer {
    @include abs-position(0, 0, 0, 0);
  }

  &__navigation {
    pointer-events: none;
    transition: opacity 0.3s linear;
    will-change: opacity;

    @include abs-position(0, 0, 0, 0);

    * {
      pointer-events: auto;
    }

    &.media-modal__navigation--hidden {
      opacity: 0;

      * {
        pointer-events: none;
      }
    }
  }

  &__nav {
    background: rgba($base-overlay-background, 0.5);
    box-sizing: border-box;
    border: 0;
    color: $primary-text-color;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 24px;
    height: 20vmax;
    margin: auto 0;
    padding: 30px 15px;

    @include abs-position(0, auto, 0, auto);

    &--left {
      left: 0;
    }

    &--right {
      right: 0;
    }
  }

  &__meta,
  &__pagination {
    width: 100%;
    text-align: center;
    pointer-events: none;

    @include abs-position(auto, auto, 20px, 0);
  }

  &__meta {
    &--shifted {
      bottom: 62px;
    }

    a {
      text-decoration: none;
      font-weight: 500;
      color: $ui-secondary-color;

      &:hover,
      &:focus,
      &:active {
        text-decoration: underline;
      }
    }
  }

  &__page-dot {
    display: inline-block;
  }

  &__button {
    background-color: $primary-text-color;
    border-radius: 6px;
    margin: 10px;
    padding: 0;
    border: 0;
    font-size: 0;

    @include size(12px);

    &--active {
      background-color: $highlight-text-color;
    }
  }

  &__close {
    @include abs-position(8px, 8px);
  }
}