.year-view {
    @red:   #a00;
    @toolbar-height: 45px;

    overflow: hidden;

    .header {
        .control {
            padding: 0.5625rem 0.5625rem 0 0.5625rem;
        }
    }

    .year-view-container {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: @toolbar-height;
        overflow-y: scroll;
        // not really needed in standard zoom but keeps the view from exploding when using text zoom
        display: flex;
        flex-wrap: wrap;
        align-content: start;
    }

    .month-container {
        float: left;
        min-height: 300px;
        // also helps with text zoom
        min-width: 16rem;
    }

    .month {
        margin-left: auto;
        margin-right: auto;

        th {
            font-weight: bold;
            text-transform: uppercase;
        }

        td, th {
            text-align: center;
            width: ~"calc(1.5rem + 8px)";
            height: ~"calc(1.5rem + 8px)";
        }

        caption {
            text-align: center;
            color: black;
            font-weight: bold;

            h2 {
                margin: 0
            }

            button {
                color: black;
                font-weight: bold;

                &:hover {
                    text-decoration: none;
                }

                &:focus {
                    text-decoration: underline;
                }
            }
        }

        .today {
            background-color: @red;
            color: white;
            border-radius: 3px;
        }

        .cw {
            color: #707070;
            font-size: 10px;
            font-weight: 300;
        }

        .weekend {
            color: @red;
        }

        .out {
            color: #ccc;
        }
    }

    &.io-ox-busy {
        .month {
            th, td, caption, .weekend, button {
                color: #ccc;
            }
        }
    }
}