@use 'variables';

.⁂-crypto-donate-modal {
  @apply max-w-sm;
}

.⁂-hotkey-modal {
  @apply max-w-4xl;
}

.⁂-media-modal {
  pointer-events: auto;
  user-select: text;
  display: flex;
  max-width: 100vw;
  width: 100%;
  height: 100%;
  position: relative;
  touch-action: pan-y;
  @apply bg-gray-900/90;

  &__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
    inset: 0;
    height: 100%;
    position: fixed;
    touch-action: pan-y;

    @media (min-width: variables.$breakpoint-xl) {
      padding-right: 24rem;
    }
    @apply transition-all;
  }

  &__closer {
    display: flex;
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    bottom: 0;

    > div {
      flex-shrink: 0;
      overflow: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
    }

    .video-player,
    .audio-player {
      margin: 3rem 0;
    }
  }

  &__navigation {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    bottom: 0;
    pointer-events: none;
    transition: opacity 0.3s linear;
    will-change: opacity;

    &--hidden {
      opacity: 0;
    }
  }

  &__closer,
  &__navigation {
    @media (min-width: variables.$breakpoint-xl) {
      inset-inline-end: 24rem;
    }
  }

  &--fullscreen {
    .⁂-media-modal__content {
      @apply xl:pr-0;
    }

    .⁂-media-modal__closer,
    .⁂-media-modal__navigation {
      inset-inline-end: 0;
    }
  }
}

.⁂-zoomable-image {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  scrollbar-width: none;
  overflow: hidden;
  user-select: none;

  &--error img {
    display: none;
  }

  &--dragging {
    cursor: grabbing;
  }

  &__preview {
    @apply size-auto max-h-[80%] max-w-full absolute z-[1] overflow-hidden;

    canvas {
      @apply absolute size-full object-cover z-[-1];
    }
  }

  img {
    max-width: 100%;
    max-height: 80%;
    width: auto;
    height: auto;
    outline: 1px solid rgba(var(--color-gray-400) / 0.15);
    outline-offset: -1px;
    touch-action: none;
    user-select: none;
  }

  &--zoomed-in {
    // z-index: 9999;
    cursor: grab;

    img {
      outline: none;
      border-radius: 0;
    }
  }
}

.⁂-dropdown-menu-modal {
  position: absolute;
  inset: 0;

  > div {
    @apply pointer-events-auto fixed inset-x-0 z-[1001] mx-auto max-h-[calc(100dvh-1rem)] w-[calc(100vw-2rem)] max-w-lg overflow-auto rounded-t-xl bg-white py-1 shadow-lg duration-200 ease-in-out focus:outline-none black:bg-black no-reduce-motion:transition-all dark:bg-gray-900 dark:ring-2 dark:ring-primary-700;
  }

  &:not(&--first-render) {
    > div {
      @apply bottom-0 opacity-100;
    }
  }

  &--first-render {
    > div {
      @apply no-reduce-motion:-bottom-32 no-reduce-motion:opacity-0;
    }
  }

  &__close {
    @apply p-2 px-3;

    button {
      @apply flex w-full appearance-none place-content-center items-center rounded-full border border-gray-700 bg-transparent p-2 text-sm font-medium text-gray-700 transition-all hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:border-gray-500 dark:text-gray-500;
    }
  }

  .⁂-dropdown-menu__page,
  .⁂-dropdown-menu__expanded-page {
    width: 100%;
  }
}
