@import "../../style/control.pcss";
@import "../../style/button.pcss";
@import "../../style/border.pcss";
@import "../../style/typography.pcss";
@import "../../style/theme.pcss";
@import "../../style/color.pcss";

[data-monster-role="control"] {
    overflow: hidden;
    user-select: none;
}

[data-monster-role="weekdays"] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 1fr;
}


[data-monster-role="weekdays"] > div {
    display: flex;
    align-items: center;
    justify-content: start;
    padding: 0.3em;
    position: relative;

    transition: background-color 0.3s;
    background-color: var(--monster-bg-color-primary-1);
    color: var(--monster-color-primary-1);

}

[data-monster-role="cells"] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(6, 1fr);

    gap: 1px;
    background-color: var(--monster-theme-control-border-color);

    border-radius: var(--monster-theme-control-border-radius);
    border-width: var(--monster-theme-control-border-width);
    border-color: var(--monster-theme-control-border-color);
    border-style: var(--monster-theme-control-border-style);
}

div.popper {
    position: absolute;
    z-index: var(--monster-z-index-dropdown);
    background-color: var(--monster-bg-color-primary-1);
    color: var(--monster-color-primary-1);
    border: none;
    box-shadow: var(--monster-box-shadow-1);
    padding: 0;
    display: none;
    box-sizing: border-box;
    outline: 1px solid var(--monster-color-primary-1);
}

div.day-cell {
    display: flex;
    align-items: start;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0.3em;
    position: relative;
    flex-direction: column;
    transition: background-color 0.3s;
    background-color: var(--monster-bg-color-primary-2);
    color: var(--monster-color-primary-2);

    aspect-ratio: 1 / 1.26;
}

div.footer {
    font-size: xx-small;
}

[data-monster-role="more-appointments"] {
    cursor: pointer;
}

.hidden {
    display: none;
}

div.current-month {
    background-color: var(--monster-bg-color-primary-1);
    color : var(--monster-color-primary-1);
}

div.weekend {
    background-color: var(--monster-bg-color-tertiary-2);
    color : var(--monster-color-tertiary-2);
}

div.today {
    background-color: var(--monster-bg-color-primary-4);
    color : var(--monster-color-primary-4);
}

[data-monster-role=appointment-container] {
    position: absolute;
    box-sizing: border-box;
    bottom: 0;
    top: 0 ;
    left: 0;
    right: 0;
}