@import "variables";

.vn-calendar {
    display: block;

    & > div {
        & > .header {
            display: flex;
            margin-bottom: 8px;
            align-items: center;
            height: 38px;

            & > .title {
                flex: 1;
                text-align: center;
                padding: 3px 0;
            }
            & > .vn-button {
                color: inherit;
            }
        }
        & #days-header {
            flex-direction: row;
            display: flex
        }
        & #days-header > .week-numbers {
            width: 10%
        }
        & #days-header > .weekdays {
            display: flex;
            color: $color-font-secondary;
            margin-bottom: 8px;
            padding: 8px 0;
            font-weight: bold;
            font-size: .8rem;
            text-align: center;
            width: 90%;

            & > section {
                width: 14.28%;
                cursor: pointer;
            }
        }
        & #days-header.hide-weeks {
            & > .weekdays {
                width: 100%
            }
        }
        & > #days-container {
            flex-direction: row;
            display: flex
        }
        & > #days-container > .weeks {
            display: flex;
            flex-direction: column;
            color: $color-font-secondary;
            font-weight: bold;
            font-size: .8rem;
            width: 10%;

            & > .day {
                height: 40px;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
        & #days-container.hide-weeks {
            & > .days {
                width: 100%
            }
        }
        #days-container > .days {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            width: 90%;

            & > .day {
                width: 14.28%;
                height: 40px;
                display: flex;
                justify-content: center;
                align-items: center;

                &.today {
                    color: $color-font;
                    & > .day-number {
                        border: 2px solid $color-font-link;

                        &:hover {
                            background-color: $color-marginal;
                            opacity: .8
                        }
                    }
                }
                &.weekend  {
                    color: $color-font-secondary;
                }
                &.previous,
                &.next {
                    opacity: .5;
                }
                &.event .day-number {
                    background-color: $color-main;
                    color: $color-font-bg;
                }
                & > .day-number {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border-radius: 50%;
                    font-size: .9rem;
                    width: 30px;
                    height: 30px;
                    cursor: pointer;
                    outline: 0;
                    transition: background-color 300ms ease-in-out;

                    &:hover {
                        background-color: lighten($color-font-secondary, 20%);
                        opacity: .8
                    }
                }
            }
            &.hide-contiguous > .day {
                &.previous,
                &.next {
                    visibility: hidden;
                }
            }
        }
    }
    &.disabled,
    &.readonly {
        & > div {
            & > .weekdays > section {
                cursor: initial;
            }
            & > .days > .day > .day-number {
                cursor: initial;
            }
        }
    }
}