@use '$styles/colors';
@use '$styles/booru-vars';
@use '$styles/environment';

// This will fix wierd misplacing of the modified media boxes in the listing.
.js-resizable-media-container {
  display: flex;
  flex-wrap: wrap;
}

.media-box {
  position: relative;
  overflow: initial !important;

  .media-box-tools {
    &:before, &:after {
      display: none;
      content: '';
      position: absolute;
      top: -1px;
      bottom: 0;
      z-index: 8;
      background: booru-vars.$background-color;
      border-top: 23px solid booru-vars.$media-box-color;
    }

    &:before {
      right: calc(100% - 1px);
      left: -50%;
      border-left: booru-vars.$media-border;
      box-shadow: booru-vars.$background-color -10px 0 10px;
    }

    &:after {
      left: calc(100% - 1px);
      right: -50%;
      border-right: booru-vars.$media-border;
      box-shadow: booru-vars.$background-color 10px 0 10px;
    }
  }

  .maintenance-popup {
    display: none;
    position: absolute;
    top: 100%;
    padding: 5px;
    left: -50%;
    right: -50%;
    z-index: 8;
    background: booru-vars.$background-color;
    border: {
      left: booru-vars.$media-border;
      right: booru-vars.$media-border;
      bottom: booru-vars.$media-border;
    };

    .tags-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;

      .tag {
        margin: 0;
      }
    }

    .tag {
      cursor: pointer;
      user-select: none;
      padding: 0 5px;
      gap: 0;

      &:hover {
        background: booru-vars.$resolved-tag-color;
        color: booru-vars.$resolved-tag-background;
      }

      &.is-missing:not(.is-added),
      &.is-present.is-removed {
        opacity: 0.5;
      }
    }
  }

  .maintenance-status-icon {
    position: absolute;
    bottom: 6px;
    right: 6px;
  }

  .media-box-show-fullscreen {
    position: absolute;
    bottom: 6px;
    left: 6px;
    display: none;
    cursor: pointer;
  }

  .media-box-tools:not(.has-active-profile) .maintenance-status-icon {
    display: none;
  }

  &.media-box--first:not(.media-box--last) {
    .media-box-tools:before {
      left: -1px;
    }

    .media-box-tools:after {
      right: -75%;
    }

    .maintenance-popup {
      left: -1px;
      right: -75%;
    }
  }

  &.media-box--last:not(.media-box--first) {
    .media-box-tools:before {
      left: -75%;
    }

    .media-box-tools:after {
      right: -1px;
    }

    .maintenance-popup {
      left: -75%;
      right: -1px;
    }
  }

  &.media-box--last.media-box--first {
    .media-box-tools:before {
      left: -1px;
    }

    .media-box-tools:after {
      right: -1px;
    }

    .maintenance-popup {
      left: -1px;
      right: -1px;
    }
  }

  &:hover {
    .media-box-tools.has-active-profile {
      &:before, &:after {
        display: block;
      }
    }

    .maintenance-popup.is-active {
      display: block;
    }

    .media-box-show-fullscreen.is-visible {
      display: block;
    }
  }
}

.fullscreen-viewer {
  pointer-events: none;
  z-index: 9999;
  opacity: var(--opacity, 0);
  background-color: black;
  transition: opacity 0.1s, transform 0.1s;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: stretch;
  align-items: stretch;
  transform: translateY(var(--offset, 0));

  img, video {
    object-fit: contain;
    width: 100%;
    height: 100%;
    opacity: 1;
  }

  .spinner {
    position: fixed;
    opacity: 0;
    left: 50vw;
    top: 50vh;
    transform: translate(-50%, -50%);
    font-size: 64px;
    text-shadow: 0 0 15px black;
  }

  img, video, .spinner {
    transition: opacity .25s ease;
  }

  .size-selector {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 1;
    background-color: booru-vars.$background-color;
  }

  .close {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 1;
    padding: 5px;
    background-color: colors.$text;
    color: colors.$background;
    font-size: 20px;
    line-height: 20px;
    width: 20px;
    height: 20px;
    text-align: center;
    display: block;
    cursor: pointer;
  }

  &.shown {
    opacity: var(--opacity, 1);
    pointer-events: initial;
  }

  &.swiped {
    opacity: var(--opacity, 1);
    transition: none;
  }

  &.loading {
    img, video {
      opacity: 0.25;
    }

    .spinner {
      opacity: 1;
    }
  }
}
