
%child-spacing{
    margin: 10px 0;
    padding: 3px;
    
}

.od-datepicker{
    input{
        appearance: none !important;
    }
    position: relative;
    z-index: 0;
    .od-datepicker-container{
        position: absolute;
        display: none;
        top: 115%;
        z-index: 1;
        padding: 15px;
        background-color: white;
        border: 1px solid var(--slate-300);
        border-radius: 8px;
        // Dark mode
        html.dark &{
            background-color: var(--slate-800);
            border-color: var(--slate-700);
        }
        // 
        .info{
            background-color: var(--slate-50);
            border: 1px solid var(--slate-300);
            // Dark  mode
            html.dark &{
                background-color: var(--slate-900);
                border-color: var(--slate-700);
                .month {
                    .month-title{
                        color: white !important;
                    }
                    svg{
                        color: white !important;
                    }
                }
            }
            padding: 10px;
            .year select{
                background-color: var(--slate-50);
                html.dark &{
                    background-color: var(--slate-800)
                }
            }
    
            .month{
                @extend %child-spacing;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .title{
                    font-size: 20px;
                    font-weight: bold;
                    color: var(--slate-800);
                }
            }
        }
        .week-days{
            display: grid;
            background-color: var(--slate-50);
            padding: 3px;
            border-radius: 3px;
            border: 1px solid var(--slate-300);
            grid-template-columns: repeat(7,1fr);
            justify-items: center;
            margin: 10px 0;
            font-size: 12px;
            font-weight: bold;
            align-items: center;
            color: var(--slate-600);
    
            html.dark &{
                background-color: var(--slate-800);
                border-color: var(--slate-700);
                color: var(--slate-400);
            }
            
        }
        .days-container{
            padding: 3px;
            display: grid;
            grid-template-columns: repeat(7,1fr);
            align-items: center;
            justify-content: center;
            margin: 10px 0;
    
            html.dark &{
                .day{
                    color: var(--slate-100);
                }
            }
        }
    
        .time-inputs {
            display: flex;
            gap: 0.5rem;
            margin-top: 1rem;
            input {
                width: 5rem;
                text-align: center;
            
            }
        }
    
    }
}