/* Shared modal header rhythm and close control. */
:where(
  .ambient-art-close,
  .fight-library-close,
  .trailer-settings-close,
  .launch-label-close,
  .prediction-depth-close,
  .close-editor,
  .prediction-exchange-close,
  .future-official-close
) {
  box-sizing: border-box;
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 44px !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  align-self: flex-start !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  cursor: pointer;
}

/* Depth dialogs position their close control independently of the heading flow. */
.prediction-depth-close {
  position: absolute;
}

:where(
  .ambient-art-close,
  .fight-library-close,
  .trailer-settings-close,
  .launch-label-close,
  .prediction-depth-close,
  .close-editor,
  .prediction-exchange-close,
  .future-official-close
)::before,
:where(
  .ambient-art-close,
  .fight-library-close,
  .trailer-settings-close,
  .launch-label-close,
  .prediction-depth-close,
  .close-editor,
  .prediction-exchange-close,
  .future-official-close
)::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 1.5px;
  background: #8ba0ae;
  transform-origin: center;
  transition: background-color .18s ease, opacity .18s ease;
}

:where(
  .ambient-art-close,
  .fight-library-close,
  .trailer-settings-close,
  .launch-label-close,
  .prediction-depth-close,
  .close-editor,
  .prediction-exchange-close,
  .future-official-close
)::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

:where(
  .ambient-art-close,
  .fight-library-close,
  .trailer-settings-close,
  .launch-label-close,
  .prediction-depth-close,
  .close-editor,
  .prediction-exchange-close,
  .future-official-close
)::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

:where(
  .ambient-art-close,
  .fight-library-close,
  .trailer-settings-close,
  .launch-label-close,
  .prediction-depth-close,
  .close-editor,
  .prediction-exchange-close,
  .future-official-close
):is(:hover, :focus-visible) {
  outline: none;
}

:where(
  .ambient-art-close,
  .fight-library-close,
  .trailer-settings-close,
  .launch-label-close,
  .prediction-depth-close,
  .close-editor,
  .prediction-exchange-close,
  .future-official-close
):is(:hover, :focus-visible)::before,
:where(
  .ambient-art-close,
  .fight-library-close,
  .trailer-settings-close,
  .launch-label-close,
  .prediction-depth-close,
  .close-editor,
  .prediction-exchange-close,
  .future-official-close
):is(:hover, :focus-visible)::after {
  background: #d5e3ec;
}

.close-editor > *,
.prediction-exchange-close > * {
  display: none !important;
}

/* Modal content begins closer to the top edge instead of sitting low. */
.prediction-editor .editor-list-view {
  padding-top: clamp(24px, 4vh, 44px);
}

.prediction-editor .editor-form-wrap {
  align-items: flex-start;
  padding-top: clamp(24px, 5vh, 52px);
}

:where(
  .ambient-art-dialog,
  .fight-library-dialog,
  .trailer-settings-dialog,
  .launch-label-dialog
)[open] {
  margin-block-start: clamp(12px, 3vh, 30px);
  margin-block-end: auto;
}

@media (max-width: 760px) {
  .prediction-editor .editor-list-view,
  .prediction-editor .editor-form-wrap {
    padding-top: 22px;
  }

  .ambient-art-panel,
  .fight-library-panel {
    padding-top: 14px;
  }

  .trailer-settings-head {
    padding-top: 16px;
  }

  :where(
    .ambient-art-dialog,
    .fight-library-dialog,
    .trailer-settings-dialog,
    .launch-label-dialog
  )[open] {
    margin-block-start: 8px;
  }
}

/* The collection room uses the same unboxed close mark as every modal. */
.trailer-archive.is-collection-threshold > .trailer-archive-inner > .trailer-archive-toggle {
  position: fixed !important;
  z-index: 120 !important;
  top: 24px !important;
  right: 16px !important;
  left: auto !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.trailer-archive.is-collection-threshold > .trailer-archive-inner > .trailer-archive-toggle > * {
  display: none !important;
}

.trailer-archive.is-collection-threshold > .trailer-archive-inner > .trailer-archive-toggle::before,
.trailer-archive.is-collection-threshold > .trailer-archive-inner > .trailer-archive-toggle::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 22px !important;
  height: 1.5px !important;
  border: 0 !important;
  background: #8ba0ae !important;
  box-shadow: none !important;
  transform-origin: center !important;
}

.trailer-archive.is-collection-threshold > .trailer-archive-inner > .trailer-archive-toggle::before {
  transform: translate(-50%, -50%) rotate(45deg) !important;
}

.trailer-archive.is-collection-threshold > .trailer-archive-inner > .trailer-archive-toggle::after {
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}

@media (max-width: 760px) {
  .trailer-archive.is-collection-threshold > .trailer-archive-inner > .trailer-archive-toggle {
    top: 24px !important;
    right: 12px !important;
  }

  .crossroad-hero > .trailer-archive.is-depth-mode.is-collection-threshold:not(.is-collapsed) > .trailer-archive-inner > .trailer-archive-toggle {
    position: absolute !important;
    top: 24px !important;
    right: 12px !important;
    left: auto !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}