.presura-weather-alert {
    --alert-accent: #e7b828;
    position: relative;
    z-index: 260;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    width: min(920px, calc(100% - 32px));
    margin: 14px auto 0;
    padding: 12px 14px;
    color: #f8fbfa;
    background: color-mix(in srgb, #071b18 88%, var(--alert-accent) 12%);
    border: 1px solid color-mix(in srgb, var(--alert-accent) 70%, transparent);
    border-left: 5px solid var(--alert-accent);
    border-radius: 14px;
    box-shadow: 0 12px 34px rgb(0 0 0 / 25%);
    backdrop-filter: blur(14px);
}

.presura-shell__content--workspace > .presura-weather-alert {
    position: absolute;
    top: 72px;
    left: 50%;
    z-index: 620;
    margin: 0;
    transform: translateX(-50%);
}

.presura-weather-alert[hidden] {
    display: none;
}

.presura-weather-alert[data-severity="moderate"] {
    --alert-accent: #f4c430;
}

.presura-weather-alert[data-severity="severe"] {
    --alert-accent: #f08a24;
}

.presura-weather-alert[data-severity="extreme"] {
    --alert-accent: #e13b34;
}

.presura-weather-alert__icon {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    color: #07130f;
    font-weight: 800;
    background: var(--alert-accent);
    border-radius: 50%;
}

.presura-weather-alert__meta {
    display: flex;
    gap: 8px;
    align-items: center;
    color: var(--alert-accent);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.presura-weather-alert__title {
    margin-top: 2px;
    font-size: 15px;
    font-weight: 750;
}

.presura-weather-alert__body p {
    margin: 2px 0 0;
    color: rgb(236 246 242 / 78%);
    font-size: 12px;
    line-height: 1.35;
}

.presura-weather-alert__details {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.presura-weather-alert__close {
    width: 36px;
    height: 36px;
    color: #fff;
    font-size: 24px;
    line-height: 1;
    background: transparent;
    border: 0;
    border-radius: 9px;
}

.presura-weather-alert__close:hover,
.presura-weather-alert__close:focus-visible {
    background: rgb(255 255 255 / 10%);
}

@media (max-width: 767px) {
    .presura-shell__content--workspace > .presura-weather-alert {
        top: calc(var(--presura-mobile-header-height, 88px) + 8px);
    }

    .presura-weather-alert {
        grid-template-columns: auto minmax(0, 1fr) auto;
        width: calc(100% - 24px);
        padding: 10px 11px;
    }

    .presura-weather-alert__details {
        display: none;
    }

    .presura-weather-alert__body p {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
}