.c-calendar {
    position: relative;

    &__nav {
        &-month {
            margin-bottom: 10px;
            margin-top: 0;
            font-size: 18px;
            font-weight: $font--bold;
        }

        @media (min-width: $screen--sm) {
            display: none;
        }
    }

    &__tabs {
        flexbox();
        margin-bottom: 10px;
        overflow-x: auto;
        overflow-y: visible;


        &-item {
            position: relative;
            padding: 5px 10px;
            border-top: solid 1px $color--gray-2;
            text-align: left;

            &.is-active {
                border-top: solid 3px $color--main;
                padding-top: 3px;
            }
        }

        &-day {
            font-size: 2em;
            line-height: 1;
            font-weight: $font--bold;
        }

        &-weekday {
            font-size: 12px;
            color: $color--gray-1;
        }
    }

    &__grid {

        @media (min-width: $screen--sm) {
            flexbox();
            overflow-x: auto;
            overflow-y: hidden;
            padding-left: 40px;
            padding-right: @padding-left;

            scrollbar();
        }
    }

    &__day {
        display: none;
        width: 100%;
        max-width: 100%;

        @media (min-width: $screen--sm) {
            display: block;
            width: 230px;
            min-width: @width;

            & + & {
                margin-left: 20px;
            }  
        }

        &.is-active {
            display: block;
        }
    }

    &__header {
        display: none;
        justify-content: center;
        align-items: center;
        padding-top: 32px;
        padding-bottom: @padding-top;
        margin-bottom: 20px;
        border-top: solid 1px $color--gray-2;
        background-color: #fff;
        border-radius: 4px;
        
        @media (min-width: $screen--sm) {
            flexbox();
        }

        &--today {
            border-top: solid 3px $color--main;
            padding-top: 30px;
        }

        &-day {
            margin-right: 7px;
            font-size: 2.5em;
            font-weight: $font--black;
            line-height: 1;
        }
    }

    &__event {
        flexbox();
        padding: 12px 10px;
        margin-bottom: 20px;
        background-color: $color--main;
        border-radius: 4px;
        color: #fff;
        transition: .4s ease-out;

        &:last-child {
            margin-bottom: 0;
        }

        &:hover, &:focus {
            background-color: #1b68ff;
            color: #fff;
            text-decoration: none;
        }

        &--disabled {
            background-color: #f1f1f1;
            color: $color--gray-1;
            pointer-events: none;

            &:hover, &:focus {
                background-color: @background-color;
                color: @color;
            }
        }

        &-hour {
            flex-basis: 50px;
        }

        &-info {
            flex: 1 0 0;
        }

        &-desc {
            margin-top: 6px;
        }
    }

    &__control {
        display: none;
        position: absolute;
        top: 120px;
        left: -10px;
        width: 40px;
        height: @width;
        background-color: #fff;
        box-shadow: 0 3px 4px 0px rgba(0,0,0,.5);
        border-radius: 50em;
        color: $color--main;
        line-height: @height;
        text-align: center;
        transition: .2s ease-out;

        &:hover {
            transform: scale(1.1);
        }

        &--next {
            left: auto;
            right: -10px;
        }

        @media (min-width: $screen--sm) {
            display: block;
        }
    }
}