@charset "UTF-8";

.p-calendar_controls{
    display: grid;
    grid-template-columns: max-content auto max-content;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    @media (width <= 760px)  {
        justify-content: space-between;
    }
    .year{
        font-weight: bold;
        color: var(--color-accent);
    }
    .btn{
        padding: 0.6rem 1rem;
        color: var(--color-accent);
        background-color: transparent;
        box-shadow:-4px -4px 8px #fff,4px 4px 8px rgb(0 0 0 / 24%);
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: box-shadow 0.2s;
        &:hover{
            box-shadow:-2px -2px 4px #fff,2px 2px 4px rgb(0 0 0 / 24%);
        }
    }
}

.p-calendar{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem 1rem;
    @media (width <= 1080px)  {
        grid-template-columns: repeat(2, 1fr);
    }
    @media (width <= 760px)  {
        grid-template-columns: 1fr;
    }
    .calendar{
        background-color: white;
        font-size: smaller;
        width: 100%;
        table-layout: fixed;
        border-left: 1px solid color-mix(in srgb, var(--color-accent) 15%, transparent);
        border-top: 1px solid color-mix(in srgb, var(--color-accent) 15%, transparent);
        caption{
            padding: 0.6rem;
            background-color: var(--color-accent);
            color: white;
            font-weight: bold;
            letter-spacing: 0.4rem;
        }
        th{
            padding: 0.2rem;
            border-right: 1px solid color-mix(in srgb, var(--color-accent) 15%, transparent);
            border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 15%, transparent);
            background-color: color-mix(in srgb, var(--color-accent) 15%, transparent);;
        }
        td{
            padding: 0.2rem;
            vertical-align: top;
            border-right: 1px solid color-mix(in srgb, var(--color-accent) 15%, transparent);
            border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 15%, transparent);
            &:has(ul){
                background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);;
            }
        }
        ul li{
            font-size: 0.6rem;
            color: var(--color-accent);
        }
    }
}