@layer components {
    .timeline {
        display: flex;
        gap:1px;
        font-size: 10px;
        padding: 10px;
        overflow-x: scroll ;

        label.top {
            height: 12px;
            text-transform: uppercase;
        }

        label.bottom {
            height: 15px;
            opacity: 0;
            display: block;
            text-align: center;
            transform: translate(-40%, 0);
        }

        .week-number {
            opacity: 0;
            margin-top:-10px;
            margin-bottom: -8px;
        }

        .line {
            width:2px;
            height: 21px;
            border-radius: 10px;
            background-color: var(--text-500);
        }
        .item {
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
            width: 14px;
            color: var(--text-400);
            gap:6px;


            &.today {
                .line {
                    background-color: var(--red-500) !important;
                    position: relative;
                    &::after {
                        content: '';
                        width: 6px;
                        height: 6px;
                        border-radius: 100px;
                        background-color: var(--red-500);
                        position: absolute;
                        top: 0%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                    }
                }
                label {
                    font-weight: bold;
                    color: var(--text-900);
                }
            }

            &.weekend {
                .line {
                    background-color: var(--text-100);
                }
            }

            &.week-start, &.today {
                label.bottom {
                    opacity: 1;
                }
            }
        }
    }

    .timeline .item:hover label.bottom {
        opacity: 1;
    }

    .timeline:hover {
        .week-number {
            opacity: 0.3;
        }
    }
}