/**
 * location-bar.css — строка местоположения под изображением (полоски + текст).
 * Контейнер липкий вместе с картинкой при прокрутке.
 */

/* --- Цвета и прозрачность полосок (диагональные линии как в рамке) --- */
:root {
    --location-bar-stripe-color: var(--frame-rgb);
    --location-bar-stripe-alpha: 0.15;
    --location-bar-stripe-secondary: 0, 0, 0;
    --location-bar-stripe-secondary-alpha: 0.02;
    --location-bar-text-color: #4c9baf;
    --location-bar-font-size: 8px;
}

/* Контейнер: под изображением, внутри .illustration-wrap (sticky), отступ от рамки 10px */
.location-bar {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: 18px;
    margin-top: 10px;
    background: var(--bg);
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
    box-sizing: border-box;
}

/* Полоски — диагональный градиент (45deg, как в snippet) */
.location-bar-stripes {
    background: repeating-linear-gradient(
        45deg,
        rgba(var(--location-bar-stripe-color), var(--location-bar-stripe-alpha)),
        rgba(var(--location-bar-stripe-color), var(--location-bar-stripe-alpha)) 10px,
        rgba(var(--location-bar-stripe-secondary), var(--location-bar-stripe-secondary-alpha)) 10px,
        rgba(var(--location-bar-stripe-secondary), var(--location-bar-stripe-secondary-alpha)) 15px
    );
    flex-shrink: 0;
}

.location-bar-stripes-left {
    width: 32px;
}

.location-bar-stripes-right {
    flex: 1;
    min-width: 24px;
}

.location-bar-text {
    flex-shrink: 0;
    padding: 6px 12px;
    font-family: "Noto Sans", sans-serif;
    font-size: var(--location-bar-font-size);
    color: var(--location-bar-text-color);
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
}