.itsa-minimap {
position: fixed;
z-index: 25;
display: flex;
flex-direction: column;
gap: 2px;
box-sizing: border-box;
padding: 6px;
border-radius: var(--itsa-minimap-radius, 8px 0 0 8px);
background: rgba(var(--itsa-minimap-panel-rgb, 4, 21, 24), var(--itsa-minimap-opacity, 0.55));
backdrop-filter: blur(6px);
box-shadow: 0 4px 24px rgba(var(--itsa-minimap-panel-rgb, 4, 21, 24), 0.25);
transform: translate(var(--itsa-minimap-out), var(--itsa-minimap-y, 0));
opacity: 0;
transition: transform 0.45s cubic-bezier(0.6, 0, 0.2, 1), opacity 0.3s ease;
}
.itsa-minimap--fade,
.itsa-minimap--instant {
transform: translate(0, var(--itsa-minimap-y, 0));
pointer-events: none;
}
.itsa-minimap--fade.is-visible,
.itsa-minimap--fade:focus-within,
.itsa-minimap--instant.is-visible,
.itsa-minimap--instant:focus-within {
pointer-events: auto;
}
.itsa-minimap--instant {
transition: none;
}
.itsa-minimap--always,
.itsa-minimap--always.is-visible {
transform: translate(0, var(--itsa-minimap-y, 0));
opacity: 1;
pointer-events: auto;
}
.itsa-minimap--right {
right: var(--itsa-minimap-margin, 0px);
--itsa-minimap-out: calc(100% + var(--itsa-minimap-margin, 0px) + 8px);
}
.itsa-minimap--left {
left: var(--itsa-minimap-margin, 0px);
--itsa-minimap-out: calc((100% + var(--itsa-minimap-margin, 0px) + 8px) * -1);
}
.itsa-minimap--top {
top: var(--itsa-minimap-margin, 0px);
--itsa-minimap-y: 0;
}
.itsa-minimap--middle {
top: 50%;
--itsa-minimap-y: -50%;
}
.itsa-minimap--bottom {
bottom: var(--itsa-minimap-margin, 0px);
--itsa-minimap-y: 0;
}
.itsa-minimap.is-visible {
transform: translate(0, var(--itsa-minimap-y, 0));
opacity: 1;
}
.itsa-minimap:focus-within {
transform: translate(0, var(--itsa-minimap-y, 0));
opacity: 1;
}
.itsa-minimap__window {
position: relative;
overflow: hidden;
border-radius: 3px;
cursor: grab;
touch-action: none;
}
.itsa-minimap__window.is-dragging {
cursor: grabbing;
}
.itsa-minimap__scale {
transform-origin: 0 0;
pointer-events: none;
user-select: none;
}
.itsa-minimap__section {
position: absolute;
left: 0;
right: 0;
display: block;
padding: 0;
border: 0;
border-radius: 2px;
background: transparent;
pointer-events: none;
outline: 2px solid transparent;
outline-offset: -2px;
transition: background-color 0.15s ease, outline-color 0.15s ease;
}
.itsa-minimap__section:hover,
.itsa-minimap__section:focus-visible {
background: rgba(var(--itsa-minimap-accent-rgb, 254, 0, 0), 0.16);
outline-color: var(--itsa-minimap-accent, #fe0000);
}
.itsa-minimap__viewport {
position: absolute;
left: 2px;
right: 2px;
border: 1px solid var(--itsa-minimap-accent, #fe0000);
border-radius: 3px;
background: rgba(var(--itsa-minimap-accent-rgb, 254, 0, 0), 0.12);
pointer-events: none;
transition: top 0.1s linear, height 0.1s linear;
}
.itsa-minimap-sheet {
transition:
transform 240ms cubic-bezier(0.2, 0.8, 0.25, 1),
box-shadow 240ms cubic-bezier(0.2, 0.8, 0.25, 1),
filter 560ms cubic-bezier(0.4, 0, 0.2, 1);
}
html.itsa-minimap-lifted.itsa-minimap-shrinks .itsa-minimap-sheet {
transform: scale(var(--itsa-minimap-shrink, 0.92));
box-shadow:
0 3px 8px rgba(var(--itsa-minimap-panel-rgb, 4, 21, 24), 0.22),
0 50px 120px rgba(var(--itsa-minimap-panel-rgb, 4, 21, 24), 0.55);
}
.itsa-minimap-sheet.itsa-minimap-moving {
will-change: transform, filter;
}
html.itsa-minimap-lifted.itsa-minimap-transition-dim .itsa-minimap-sheet {
filter: brightness(var(--itsa-minimap-dim, .55));
}
html.itsa-minimap-lifted.itsa-minimap-transition-blur .itsa-minimap-sheet {
filter: blur(var(--itsa-minimap-blur, 4px));
}
html.itsa-minimap-lifted.itsa-minimap-transition-grayscale .itsa-minimap-sheet {
filter: grayscale(var(--itsa-minimap-gray, 1));
}
.itsa-minimap-lines {
position: fixed;
inset: 0;
z-index: 24;
pointer-events: none;
overflow: hidden;
opacity: 0;
transition: opacity 240ms ease;
}
.itsa-minimap-lines::before,
.itsa-minimap-lines::after {
content: "";
position: absolute;
left: 0;
right: 0;
}
.itsa-minimap-lines::before {
top: -50%;
height: 200%;
background: repeating-linear-gradient(
to bottom,
rgba(0, 0, 0, .26) 0,
rgba(0, 0, 0, .26) 1px,
transparent 1px,
transparent 3px
);
}
.itsa-minimap-lines::after {
top: 0;
height: 14%;
background: linear-gradient(
to bottom,
transparent,
rgba(255, 255, 255, .05) 30%,
rgba(255, 255, 255, .10) 50%,
rgba(255, 255, 255, .05) 70%,
transparent
);
}
html.itsa-minimap-lifted .itsa-minimap-lines {
opacity: 1;
}
html.itsa-minimap-lifted .itsa-minimap-lines::before {
animation: itsa-minimap-roll 900ms steps(3) infinite;
}
html.itsa-minimap-lifted .itsa-minimap-lines::after {
animation: itsa-minimap-band 2.4s steps(14) infinite;
}
@keyframes itsa-minimap-roll {
from { transform: translateY(0); }
to   { transform: translateY(3px); }
}
@keyframes itsa-minimap-band {
from { transform: translateY(-140%); }
to   { transform: translateY(760%); }
}
html.itsa-minimap-lifted.itsa-minimap-shrinks body {
background-color: var(--itsa-minimap-gap, #041518);
}
@media (prefers-reduced-motion: reduce) {
.itsa-minimap,
.itsa-minimap__viewport {
transition: none;
}
.itsa-minimap-sheet {
transition: filter 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
html.itsa-minimap-lifted.itsa-minimap-shrinks .itsa-minimap-sheet {
transform: none;
}
.itsa-minimap-lines {
transition: none;
}
html.itsa-minimap-lifted .itsa-minimap-lines::before,
html.itsa-minimap-lifted .itsa-minimap-lines::after {
animation: none;
}
}