@import '../../styles/colors', '../../styles/fonts', '../../styles/fontSizeCalculator';

$day-size: 30px;

.date-picker-day {
    align-items: center;
    align-self: stretch;
    display: flex;
    flex: 1 0 auto;
    justify-content: center;
    max-width: $day-size;
    min-height: $day-size;
    position: relative;
    user-select: none;
    span {
        align-items: center;
        border-radius: $day-size / 2;
        color: color(color);
        cursor: pointer;
        display: flex;
        flex: 0 1 auto;
        font-size: rem(14px);
        font-weight: $fontWeightSemiBold;
        justify-content: center;
        max-height: $day-size;
        max-width: $day-size;
        min-height: $day-size;
        min-width: $day-size;
        position: relative;
        z-index: 1;
    }
    &.date-picker-day-has-event span { color: color(colorLink); font-weight: $fontWeightBold; }
    &:not(.date-picker-day-outside-month):not(.date-picker-day-disabled) span:hover {
        background-color: color(backgroundColorHighlight);
        box-shadow: none;
        color: color(colorInverse);
    }
    &.date-picker-day-end-selected, &.date-picker-day-start-selected {
        span { font-weight: $fontWeightBold; }
    }
    &::after {
        content: '';
        height: $day-size;
        margin-top: -$day-size / 2;
        position: absolute;
        top: 50%;
        z-index: 0;
    }
    &.date-picker-day-start-selected {
        &.date-picker-day-end-selected, &.date-picker-day-no-end-day-selected, &:last-child {
            &::after { background-color: transparent !important; }
        }
        &::after { right: 0; width: 50%; }
    }
    &.date-picker-day-end-selected {
        &:first-child::after { background-color: transparent !important; }
        &::after { left: 0; width: 50%; }
    }
    &-today span {
        background-color: color(backgroundColorDisable);
        box-shadow: none;
    }
    &.date-picker-day-in-range {
        background-color: transparent;
        span { background-color: transparent; box-shadow: none; }
        &::after { width: 100%; }
        &:first-child::after { right: 0; width: 50%; }
        &:last-child::after { left: 0; width: 50%; }
    }
    &-outside-month, &.date-picker-day-disabled {
        span { color: color(colorStatic); cursor: default; }
    }
}
.date-picker-week .date-picker-day {
    &:first-of-type.datepicker-day-in-range::after { border-radius: ($day-size / 2) 0 0 ($day-size / 2); }
    &:last-of-type.datepicker-day-in-range::after { border-radius: 0 ($day-size / 2) ($day-size / 2) 0; }
}
.date-picker-calendar {
    &-single-date {
        .date-picker-day-selected span {
            background-color: color(backgroundColorHighlight);
            color: color(colorInverse);
        }
    }
    &-date-range {
        .date-picker-day-end-selected, .date-picker-day-start-selected {
            span {
                background-color: color(backgroundColorHighlight);
                color: color(colorInverse);
            }
        }
        .date-picker-day-end-selected, .date-picker-day-start-selected, .date-picker-day-in-range {
            &::after { background-color: color(backgroundColorSky); }
        }
        .date-picker-day-in-range {
            span { color: color(colorInverse); }
            &:first-child, &:last-child {
                span { background-color: color(backgroundColorSky); }
            }
        }
    }
}