@layer components {

    /* Notifications */
    .notification {

        &.on {

            &::before {
                color: var(--color-notification-badge-bg);
            }

            &:hover::before,
            &:focus-visible::before {
                color: var(--color-bg-surface);
            }
        }
    }

    :root[data-theme="dark"] {

        .notification {

            &.on {

                &:hover::before,
                &:focus-visible::before {
                    color: var(--color-white);
                }
            }
        }
    }

    .notification__panel {
        --notification-accent: rgb(20 126 214);
        --notification-accent-soft: rgb(219 234 254 / 0.72);
        --notification-accent-panel: rgb(248 251 255);
        --notification-accent-border: rgb(191 219 254);
    }

    .site-header__notification-badge {
        position: absolute;
        top: 0.1875rem;
        right: 0.1875rem;
        display: grid;
        place-items: center;
        min-width: var(--space-15);
        height: var(--space-15);
        padding: 0 0.1875rem;
        border: var(--border-width-hairline) solid var(--color-brand-primary);
        border-radius: var(--radius-round);
        background: var(--color-neutral-900, var(--color-text-header-control));
        color: var(--color-white);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-bold);
        line-height: var(--leading-badge);
        text-align: center;
        pointer-events: none;
    }

    .site-header__notification-badge[hidden] {
        display: none;
    }

    .site-header__notification-badge--inline {
        position: static;
        margin-left: auto;
        border-color: transparent;
    }

    .notification-counter-mobiel {
        position: absolute;
        top: 0.6rem;
        right: -0.3rem;
        display: none;
        justify-content: center;
        justify-items: center;
        flex-direction: column;
        width: var(--space-16);
        aspect-ratio: 1 / 1;
        border-radius: var(--radius-round);
        background-color: var(--color-notification-badge-bg);
        color: var(--color-notification-badge-text);
        font-size: var(--text-xs);
        opacity: 0;
        transform: translate(30%);

        &.is-active {
            display: flex;
            opacity: 1;
        }
    }

    .site-header__dropdown-panel--notification {
        width: min(31rem, calc(100vw - var(--space-16)));
        max-width: calc(100vw - var(--space-16));
        border-radius: var(--radius-corner);
    }

    .site-header__dropdown-panel--notification {

        @media (max-width: 1200px) {
            right: 0;
            left: auto;
            width: min(24rem, calc(100vw - var(--space-16)));
            min-width: 0;
            max-width: calc(100vw - var(--space-16));
            transform: none;
        }
    }

    .site-header__dropdown-panel--notification {

        @media (min-width: 1200px) {
            display: grid;
            gap: var(--space-14);
            width: min(31rem, calc(100vw - var(--space-24)));
            padding: var(--space-20);
            border: var(--border-width-hairline) solid var(--color-border-subtle);
            border-radius: calc(var(--radius-corner) + var(--space-4));
            background: var(--color-bg-surface);
            color: var(--color-text);
            box-shadow: 0 1.25rem 3rem var(--color-dropdown-shadow);
        }
    }

    .notification-panel__header {
        display: flex;
        align-items: center;
        gap: var(--space-12);
        min-width: 0;
    }

    .notification-panel__title {
        margin: 0;
        color: var(--color-text);
        font-size: var(--text-lg);
        font-weight: var(--font-weight-extrabold);
        line-height: var(--leading-tight);
        letter-spacing: 0;

        @media (min-width: 1200px) {
            font-size: var(--text-xl);
        }
    }

    .notification-panel__count {
        display: inline-grid;
        place-items: center;
        min-width: var(--space-32);
        height: var(--space-32);
        padding-inline: var(--space-8);
        border-radius: var(--radius-round);
        background: var(--color-brand-primary);
        color: var(--color-text-header-control);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-bold);
        line-height: 1;
    }

    .notification-panel__count[hidden] {
        display: none;
    }

    .site-header__dropdown-list--notification {
        overflow-y: auto;
        overscroll-behavior: contain;
        display: grid;
        gap: var(--space-10);
        max-height: min(26rem, calc(100vh - 13rem));
        padding: 0;
        list-style: none;
        scroll-behavior: smooth;
        scrollbar-gutter: stable;
    }

    .dropdown-notification .notification-item {
        height: auto;
    }

    .notification-item.notification-item--comment {
        display: grid;
        grid-template-columns: var(--space-10) var(--space-56) minmax(0, 1fr);
        align-items: center;
        gap: var(--space-14);
        min-height: 6.75rem;
        padding: var(--space-16);
        border: var(--border-width-hairline) solid var(--notification-accent-border);
        border-radius: var(--radius-corner);
        background:
            radial-gradient(circle at 12% 50%, color-mix(in oklch, var(--notification-accent) 14%, transparent), transparent 34%),
            linear-gradient(135deg, var(--notification-accent-panel), var(--color-bg-surface));
        color: var(--color-text);
        cursor: pointer;
        transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    }

    .notification-item.notification-item--comment:hover,
    .notification-item.notification-item--comment:focus-visible {
        outline: none;
        background:
            radial-gradient(circle at 12% 50%, color-mix(in oklch, var(--notification-accent) 18%, transparent), transparent 36%),
            linear-gradient(135deg, color-mix(in oklch, var(--notification-accent-panel) 92%, var(--color-bg-surface)), var(--color-bg-surface));
        box-shadow: 0 0.75rem 1.5rem var(--color-shadow-soft);
        transform: translateY(-2px);
    }

    .notification-item.notification-item--comment:focus-visible {
        box-shadow: 0 0 0 0.125rem var(--color-focus-gold), 0 0.75rem 1.5rem var(--color-shadow-soft);
    }

    .notification-item--friend-request {
        --notification-accent: var(--color-brand-primary);
        --notification-accent-soft: rgb(254 215 64 / 0.55);
        --notification-accent-panel: rgb(255 250 235);
        --notification-accent-border: rgb(254 224 138);
    }

    .notification-item--favorite {
        --notification-accent: rgb(80 190 26);
        --notification-accent-soft: rgb(220 252 187 / 0.72);
        --notification-accent-panel: rgb(250 255 244);
        --notification-accent-border: rgb(190 231 160);
    }

    .notification-item--badge {
        --notification-accent: rgb(245 158 11);
        --notification-accent-soft: rgb(254 243 199 / 0.72);
        --notification-accent-panel: rgb(255 251 235);
        --notification-accent-border: rgb(252 211 77);
    }

    .notification-item__status {
        display: block;
        width: var(--space-10);
        height: var(--space-10);
        border-radius: var(--radius-round);
        background: var(--notification-accent);
        box-shadow: 0 0.25rem 0.75rem color-mix(in oklch, var(--notification-accent) 24%, transparent);
    }

    .notification-item__icon-wrap {
        position: relative;
        display: grid;
        place-items: center;
        width: var(--space-56);
        height: var(--space-56);
        border-radius: var(--radius-round);
        background:
            radial-gradient(circle at 30% 22%, rgb(255 255 255 / 0.5), transparent 48%),
            var(--notification-accent-soft);
        color: var(--color-neutral-900);
    }

    .notification-item__icon {
        position: static;
        display: block;
        width: var(--space-24);
        height: var(--space-24);
    }

    .notification-item__icon-plus {
        position: absolute;
        right: 0.85rem;
        bottom: 0.85rem;
        width: 0.75rem;
        height: 0.75rem;
    }

    .notification-item__right {
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--space-20);
        align-items: center;
        gap: var(--space-14);
        min-width: 0;
    }

    .notification-item-right__left {
        display: grid;
        gap: var(--space-6);
        min-width: 0;
    }

    .notification-comment {
        color: var(--color-text);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-regular);
        line-height: var(--leading-tight);
    }

    .notification-item-right__left p {
        display: -webkit-box;
        overflow: hidden;
        margin: 0;
        color: var(--color-text);
        font-size: var(--text-base);
        font-weight: var(--font-weight-extrabold);
        line-height: var(--leading-tight);
        overflow-wrap: break-word;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .notification-item-right__left time {
        color: var(--color-text-faint);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-regular);
        line-height: var(--leading-tight);
    }

    .notification-item-right__right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        opacity: 1;
    }

    .notification-item__chevron {
        position: static;
        display: block;
        width: var(--space-20);
        height: var(--space-20);
        color: var(--color-text);
    }

    .notification-item__remove {
        display: none;
    }

    .notification-bottom {
        display: flex;
        align-items: center;
        margin: var(--space-4) 0 0;
        padding-top: var(--space-16);
        border-top: var(--border-width-hairline) solid var(--color-border-subtle);
    }

    .notification-bottom.hidden,
    .notification-bottom[hidden] {
        display: none;
        opacity: 0;
    }

    .notification-bottom__action {
        display: inline-grid;
        grid-template-columns: var(--space-20) max-content;
        align-items: center;
        justify-content: center;
        gap: var(--space-8);
        min-height: var(--space-40);
        padding: var(--space-6) var(--space-10);
        border-radius: var(--radius-corner);
        background: transparent;
        width: 100%;
        color: var(--color-text);
        font: inherit;
        font-size: var(--text-base);
        font-weight: var(--font-weight-regular);
        line-height: var(--leading-tight);
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
        transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
    }

    .notification-bottom__action+.notification-bottom__action {
        border-left: var(--border-width-hairline) solid var(--color-border-subtle);
        border-radius: 0 var(--radius-corner) var(--radius-corner) 0;
    }

    .notification-bottom__action:hover,
    .notification-bottom__action:focus-visible {
        outline: none;
        background: var(--color-bg-surface-soft);
        color: var(--color-text);
    }

    .notification-bottom__action:focus-visible {
        box-shadow: 0 0 0 0.125rem var(--color-focus-gold);
    }

    .notification-bottom__action--remove:hover,
    .notification-bottom__action--remove:focus-visible {
        background: color-mix(in oklch, var(--color-danger) 10%, transparent);
        color: var(--color-danger);
    }

    .notification-bottom__action--remove:focus-visible {
        box-shadow: 0 0 0 0.125rem color-mix(in oklch, var(--color-danger) 24%, transparent);
    }

    .notification-bottom__icon {
        position: static;
        display: block;
        flex: 0 0 auto;
        width: var(--space-16);
        height: var(--space-16);
        min-width: var(--space-20);
        color: currentColor;
    }

    .notification-empty {
        display: grid;
        place-items: center;
        min-height: 7rem;
        padding: var(--space-20);
        border: var(--border-width-hairline) solid var(--color-border-subtle);
        border-radius: var(--radius-corner);
        background: var(--color-bg-surface-soft);
        color: var(--color-text-faint);
        text-align: center;
    }

    .notification-empty p {
        margin: 0;
    }

    .site-header-mobile__avatar-wrap .site-header__notification-badge,
    .mobile-drawer__avatar-wrap .site-header__notification-badge {

        @media (max-width: 1200px) {
            top: -0.125rem;
            right: -0.25rem;
            border-color: var(--color-header-bg);
        }
    }

    .mobile-drawer__icon .site-header__notification-badge {

        @media (max-width: 1200px) {
            top: -0.3125rem;
            right: 0;
            border-color: var(--color-bg-surface);
        }
    }

    .mobile-drawer__notification-list {

        @media (max-width: 1200px) {
            display: grid;
            gap: var(--space-12);
            padding: 0;
            list-style: none;
        }
    }

    .mobile-drawer__notification-list .notification-item.notification-item--comment {

        @media (max-width: 1200px) {
            grid-template-columns: var(--space-12) var(--space-48) minmax(0, 1fr);
            gap: var(--space-12);
            min-height: auto;
            padding: var(--space-14);
            border-radius: var(--radius-corner);
        }
    }

    .mobile-drawer__notification-list .notification-item__icon-wrap {

        @media (max-width: 1200px) {
            width: var(--space-48);
            height: var(--space-48);
        }
    }

    .mobile-drawer__notification-list .notification-item__icon {

        @media (max-width: 1200px) {
            width: var(--space-20);
            height: var(--space-20);
        }
    }

    .mobile-drawer__notification-list .notification-item__icon-plus {

        @media (max-width: 1200px) {
            right: 0.7rem;
            bottom: 0.7rem;
            width: 0.75rem;
            height: 0.75rem;
        }
    }

    .mobile-drawer__notification-list .notification-item-right__left p {

        @media (max-width: 1200px) {
            font-size: var(--text-base);
        }
    }

    .mobile-drawer__notification-list .notification-comment,
    .mobile-drawer__notification-list .notification-item-right__left time {

        @media (max-width: 1200px) {
            font-size: var(--text-sm);
        }
    }

    .mobile-drawer__body .notification-bottom {

        @media (max-width: 1200px) {
            grid-template-columns: 1fr;
            gap: var(--space-6);
            padding-top: var(--space-12);
        }
    }

    .mobile-drawer__body .notification-bottom__action+.notification-bottom__action {

        @media (max-width: 1200px) {
            border-top: var(--border-width-hairline) solid var(--color-border-subtle);
            border-left: 0;
            border-radius: var(--radius-corner);
        }
    }

    :root[data-theme="dark"] .site-header__dropdown-panel--notification {

        @media (min-width: 1200px) {
            border-color: var(--color-border-on-dark);
            background: var(--color-bg-surface);
            box-shadow: 0 1.25rem 3rem color-mix(in oklch, var(--color-black) 34%, transparent);
        }
    }

    :root[data-theme="dark"] .notification-item.notification-item--comment {
        background:
            radial-gradient(circle at 12% 50%, color-mix(in oklch, var(--notification-accent) 18%, transparent), transparent 34%),
            linear-gradient(135deg, color-mix(in oklch, var(--notification-accent) 10%, var(--color-bg-surface)), var(--color-bg-surface));
    }

    :root[data-theme="dark"] .notification-item.notification-item--comment:hover,
    :root[data-theme="dark"] .notification-item.notification-item--comment:focus-visible {
        background:
            radial-gradient(circle at 12% 50%, color-mix(in oklch, var(--notification-accent) 22%, transparent), transparent 36%),
            linear-gradient(135deg, color-mix(in oklch, var(--notification-accent) 14%, var(--color-bg-surface)), var(--color-bg-surface));
        box-shadow: 0 0.75rem 1.5rem color-mix(in oklch, var(--color-black) 20%, transparent);
    }

    :root[data-theme="dark"] .notification-bottom__action:hover,
    :root[data-theme="dark"] .notification-bottom__action:focus-visible {
        background: var(--color-bg-on-dark-subtle);
    }
}