$prefix-date-table: #{$prefix}date-table;
.#{$prefix-date-table}{
    $grid-size: 24px;
    @mixin cells {
        width: $grid-size;
        height: $grid-size;
        margin: 2px 0;
        text-align: center;
        line-height: $grid-size;
    }
    &-header{
        text-align: right;
        display: flex;
        justify-content: space-around;
        padding: 0 $gap-base / 4 * 3;
        &>span{
            @include cells();
            font-weight: 600;
            @include get-color-title();
        }
    }
    &-body{
        padding: 0 $gap-base / 4 * 3;
    }
    &-week{
        display: flex;
        justify-content: space-around;
        border-radius: $border-radius-button;
        margin: 2px 0;
        transition: color $transition-hover-time $bezier,
                    background-color $transition-hover-time $bezier;
        &-optional{
            position: relative;
            cursor: pointer;
            &:after{
                content: '';
                position: absolute;
                width: 100%;
                height: 100%;
            }
            &:not([disabled]):hover{
                @include get-color-divider(background-color);
            }
            &-selected{
                background: $color-primary;
                @include get-color-background-coloured();
                &:not([disabled]):hover{
                    @include get-color-primary-hover(background-color);
                }
                &>span{
                    &:after{
                        background: currentColor;
                    }
                }
            }
        }
    }
    &-cell{
        @include cells();
        position: relative;
        border-radius: $border-radius-button;
        transition: color $transition-hover-time $bezier,
                    background-color $transition-hover-time $bezier;
        &-not-in-month{
            background-color: transparent;
            @include get-color-disabled(color);
        }
        cursor: pointer;
        &:not([disabled]):hover{
            @include get-color-divider(background-color);
        }
        &-today{
            &:after{
                content: '';
                position: absolute;
                display: block;
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: $color-primary;
                right: 1px;
                top: 1px;
            }
        }
        &-week{
            @include cells();
            @include get-color-sub-hover(color);
            font-weight: bold;
        }
        &-selected{
            background: $color-primary;
            @include get-color-background-coloured();
            &:not([disabled]):hover{
                @include get-color-primary-hover(background-color);
            }
            &:after{
                background: currentColor;
            }
        }
    }
}