/*
 * STORECOM
 * Colori componenti gestiti da Pico.
 * Mappiamo soltanto il primary sulla palette ufficiale Jade 450.
 */

:root,
[data-theme="light"] {
    --pico-primary: var(--pico-jade-450);
    --pico-primary-background: var(--pico-jade-450);
    --pico-primary-border: var(--pico-jade-450);

    --pico-primary-hover: var(--pico-jade-500);
    --pico-primary-hover-background: var(--pico-jade-500);
    --pico-primary-hover-border: var(--pico-jade-500);

    --pico-primary-focus: rgba(0, 166, 126, .22);
    --pico-primary-inverse: #fff;

    --pico-border-radius: .3rem;
}

[data-theme="dark"] {
    --pico-primary: var(--pico-jade-350);
    --pico-primary-background: var(--pico-jade-450);
    --pico-primary-border: var(--pico-jade-450);

    --pico-primary-hover: var(--pico-jade-300);
    --pico-primary-hover-background: var(--pico-jade-400);
    --pico-primary-hover-border: var(--pico-jade-400);

    --pico-primary-inverse: #fff;

    --pico-border-radius: .3rem;
}

.storecom-topbar {
    min-height: 58px;
    padding:
        .55rem
        max(
            1rem,
            calc((100vw - 1280px) / 2)
        );

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    border-bottom:
        1px solid
        var(--pico-muted-border-color);

    background:
        var(--pico-background-color);

    position: sticky;
    top: 0;
    z-index: 50;
}

.storecom-brand {
    font-weight: 850;
    letter-spacing: .035em;
    text-decoration: none;
    white-space: nowrap;
}

.storecom-main-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .1rem;
    margin: 0;
}

.storecom-main-nav > a {
    width: 38px;
    height: 38px;
    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;
}

.storecom-main-nav i {
    font-size: 1.05rem;
}

.storecom-header-email {
    display: inline-flex;
    align-items: center;
    padding: 0 .45rem;
    font-size: .86rem;
    white-space: nowrap;
}

.storecom-nav-notifications {
    position: relative;
}

.storecom-nav-notifications mark {
    position: absolute;
    top: 0;
    right: 0;

    min-width: 17px;
    height: 17px;
    padding: 0 4px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;
    font-size: .62rem;
}

/* solo layout */
.storecom-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
}

.storecom-toolbar > form,
.events-actions form,
.events-filter-actions form,
.screen-slide-actions form,
.screen-slide-actions-v2 form,
.files-actions form,
.storecom-poster-actions form {
    margin: 0;
}

.storecom-toolbar > a[role="button"],
.storecom-toolbar > button,
.storecom-toolbar > form > button {
    margin: 0;
}

.storecom-footer {
    width:
        min(
            1280px,
            calc(100% - 2rem)
        );

    margin: 2rem auto 0;
    padding: 1rem 0 1.5rem;

    display: flex;
    justify-content: space-between;

    border-top:
        1px solid
        var(--pico-muted-border-color);
}

@media (max-width: 780px) {
    .storecom-topbar {
        padding: .5rem;
        gap: .5rem;
    }

    .storecom-header-email {
        display: none;
    }

    .storecom-main-nav > a {
        width: 35px;
        height: 35px;
    }
}