@import '../../../less/palette';
@import '../../../less/palette-brand-@{theme}';

.day {
    @day-cell-length: 40px;

    position: relative;
    display: flex;
    flex: @day-cell-length;
    justify-content: center;
    line-height: @day-cell-length + 2;
    height: @day-cell-length;

    &:before,
    &:after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

    &.in-range {
        &:after {
            background-color: #f6f7f7;
            z-index: -2;
        }
    }

    &:hover:not(.disabled):not(.empty) {
        cursor: pointer;
    }

    &.selected {
        color: white;

        &:before {
            border-radius: 50%;
            background-color: @color-brand;
            z-index: -1;
        }

        &:hover {
            &:before {
                background-color: @color-brand-active;
            }
        }
    }

    &.disabled {
        color: @color-hint;
    }
}
