@use 'constants' as consts;

.calendar {
    .month-selector {
        display: flex;
        justify-content: space-between;
        align-items: center;

        width: 100%;
        font-weight: bold;

        .prev.button,
        .next.button {

            .svg-arrow {
                display: block;
                margin: var(--margin) calc(var(--margin) / 2);
                fill: consts.$link-color;
                width: 0.8rem;
                height: 0.8rem;
            }

            &:hover .svg-arrow {
                fill: consts.$link-hover-color;
            }
        }

        .prev {
            float: left;
        }

        .next {
            float: right;
        }

        .year {
            margin: var(--margin);
        }

        .month {
            display: none;
        }

        .month.current {
            display: inline;
        }
    }

    ul.weekdays {
        margin: 0;
        padding: 0px 0;
        font-style: italic;

        li {
            display: inline-block;
            width: 14%;
            text-align: center;
            margin: 0;
        }
    }

    ul.days {
        margin: 0;
        padding: 0;

        li {
            display: inline-block;
            width: 14%;
            text-align: center;
            margin: 0;

            &.current-month {
                background-color: green;
            }

            &.today {
                font-weight: bold;
            }

            &.selected-day {
                background-color: red;
            }

            .remove-scheduled-recipe {
                padding: 0px calc(var(--margin) / 2);
            }
        }
    }
}

#hidden-templates-calendar {
    display: none;
}