﻿.s-navigation-mobile .s-navigation-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.063rem, 1fr));
    gap: 8px;
    padding-right: 12px;
    padding-left: 12px;
}

    .s-navigation-mobile .s-navigation-list .s-navigation-entry {
        position: relative;
        border-radius: 4px;
        overflow: hidden;
    }

.s-navigation-list .s-navigation-entry {
    background: #FFFFFF;
    transition: background 150ms;
    cursor: pointer;
}

.s-navigation-mobile .current-date {
    position: absolute;
    top: 14px;
    left: 49%;
    font-size: 10px !important;
    transform: translate(-50%, -50%);
}

.s-navigation-list a {
    display: flex;
    align-items: center;
    min-width: 0;
    box-sizing: border-box;
}

.s-navigation-list .s-navigation-entry-label {
    padding-right: 8px;
    padding-left: 8px;
    gap: 8px;
    height: 44px;
}

.s-navigation-mobile .s-navigation-list .s-navigation-entry .icon_container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    width: 24px;
}

.s-navigation-mobile .s-navigation-list .s-navigation-entry a span.title {
    height: 16px;
    line-height: 18px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
}

/* Yellow diagonal glowing rectangles */
.s-navigation-entry .rect1,
.s-navigation-entry .rect2 {
    position: absolute;
    top: -40px;
    height: 120px;
    background: #FFE325;
    filter: blur(2.5px);
    transform: rotate(20deg);
    pointer-events: none;
}

.s-navigation-entry .rect1 {
    width: 35px;
    left: -120px;
    opacity: 0.2;
    animation: rect1Move 1801ms ease-in-out infinite;
}

.s-navigation-entry .rect2 {
    width: 10px;
    left: -60px;
    opacity: 0.1;
    animation: rect2Move 1801ms ease-in-out infinite;
}

/* Keyframes */
@keyframes rect1Move {
    0% {
        left: -120px;
    }
    /* wait delay */
    44% {
        left: -120px;
    }
    /* 800ms of 1801ms ≈ 44% */
    100% {
        left: 160px;
    }
    /* smooth slide to right */
    /* browser will instantly jump back at loop restart */
}

@keyframes rect2Move {
    0% {
        left: -60px;
    }

    44% {
        left: -60px;
    }

    100% {
        left: 210px;
    }
}
