@import "colors";

vn-calendar {
    width: 100%;

    .header vn-one {
        text-align: center;
        padding: 0.2em 0
    }

    .body {
        .days {
            justify-content: flex-start;
            align-items: flex-start;
            flex-wrap: wrap;
        }

        .weekdays {
            border-bottom: 1px solid $hover;
            border-top: 1px solid $hover;
            font-weight: bold
        }

        .day {
            box-sizing: border-box;
            padding: 0.1em;
            width: 14.2857143%;
            line-height: 1.5em;

            span {
                transition: background-color 0.3s;
                text-align: center;
                font-size: 0.8vw;
                border-radius: 50%;
                display: block;
                padding: 0.2em;
                cursor: pointer
            }
        }

        .day:hover span {
            background-color: #DDD
        }

        .day.gray {
            color: $secondary-font-color
        }

        .day.orange {
            font-weight: bold;
            color: $main-01;
        }
        
        .day.orange-circle {
            color: $main-font-color;
            & > span {
                background-color: $main-01
            }
        }

        .day.orange-circle:hover {
            & > span {
                background-color: $main-01-05
            }
        }

        .day.light-orange {
            color: $main-01-05
        }

        .day.green {
            font-weight: bold;
            color: $main-02;
        }

        .day.green-circle {
            color: $main-font-color;
            & > span {
                background-color: $main-02
            }
        }

        .day.green-circle:hover {
            & > span {
                background-color: $main-02-05
            }
        }

        .day.light-green {
            font-weight: bold;
            color: $main-02-05
        }

        .day.blue {
            font-weight: bold;
            color: $main-03;
        }

        .day.blue-circle {
            color: $main-font-color;
            & > span {
                background-color: $main-03
            }
        }

        .day.blue-circle:hover {
            & > span {
                background-color: $main-03-05
            }
        }

        .day.light-blue {
            font-weight: bold;
            color: $main-03-05
        }

        .day.red {
            font-weight: bold;
            color: $alert-01
        }

        .day.red-circle {
            color: $main-font-color;
            & > span {
                background-color: $alert-01
            }
        }

        .day.red-circle:hover {
            & > span {
                background-color: $alert-01-05
            }
        }

        .day.light-red {
            font-weight: bold;
            color: $alert-01-05;
        }
    }
}