@import '../../common/styles/_abstract-links';
@import '../../common/styles/text-base';
@import '../../common/styles/colors';

@calendar-width: 273px;
@calendar-height: 236px;
@calendar-base-height: 216px;
@calendar-gap: 8px;

@calendar-transition: background-color 0.3s, color 0.3s, transform 0.3s;

@calendar-disabled-color: @color-gray-30;
@calendar-background: @color-white;
@calendar-weekend-color: @color-gray-40;
@calendar-interval-color: @color-blue-10;

.bloko-calendar-day-with-pointer(@border-direction) {
    color: @calendar-background;
    background: @color-blue-60;
    box-sizing: content-box;
    position: relative;
    border: inherit;
    border-style: solid;
    @{border-direction}: 8px solid @calendar-interval-color;
}

.bloko-calendar-interval-pointer(@direction, @border-direction) {
    position: absolute;
    content: '';
    border: 10px solid transparent;
    @{direction}: -15px;
    @{border-direction}: 5px solid @color-blue-60;
}

.bloko-calendar-reset-tap-highlighting {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.bloko-calendar {
    .bloko-text-medium();

    width: @calendar-width;
    height: @calendar-height;
    user-select: none;
}

.bloko-calendar__switcher-wrapper {
    display: flex;
    justify-content: space-between;
    margin: 0 -@calendar-gap / 2 @calendar-gap;
}

.bloko-calendar__switcher {
    display: flex;
    align-items: center;
}

.bloko-calendar__switcher-arrow {
    display: flex;
    align-items: center;
    height: 20px;
    width: 16px;
    cursor: pointer;
}

.bloko-calendar__switcher-arrow_back,
.bloko-calendar__switcher-arrow_next {
    transition: @calendar-transition;
}

.bloko-calendar__switcher-arrow_back:hover {
    transform: translateX(-2px);
}

.bloko-calendar__switcher-arrow_next:hover {
    transform: translateX(2px);
}

.bloko-calendar__switcher-arrow:active {
    transform: scale(1.1, 1.1);
}

.bloko-calendar__switcher-arrow_disabled {
    cursor: auto;

    &:hover,
    &:active {
        transform: none;
    }
}

.bloko-calendar__name {
    height: 20px;
    margin: 0 6px;
    text-align: center;
    color: @link-color;
    cursor: pointer;
    transition: @calendar-transition;

    &:hover {
        color: @link-color-active;
    }
}

.bloko-calendar__name_months {
    min-width: 63px;
}

.bloko-calendar__name_years {
    min-width: 32px;
}

.bloko-calendar__name_disabled {
    color: @calendar-disabled-color;
    cursor: auto;

    &:hover {
        color: @calendar-disabled-color;
    }
}

.bloko-calendar__base {
    box-sizing: border-box;
    width: @calendar-width;
    height: @calendar-base-height;
    padding-bottom: 20px;
}

.bloko-calendar__weekdays {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 38px;
    padding: 0 @calendar-gap;
    margin-bottom: @calendar-gap;
    color: @calendar-disabled-color;
    border-bottom: 1px solid @color-gray-20;
}

.bloko-calendar__weekday {
    min-width: 23px;
    text-align: center;
}

.bloko-calendar__days {
    box-sizing: border-box;
    height: 150px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
}

.bloko-calendar__day {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 20px;
    margin: 0 @calendar-gap;
    color: @color-gray-80;
    transition: @calendar-transition;

    &:hover {
        color: @color-blue-60;
        cursor: pointer;
        background-color: fade(@color-blue-60, 10%);
    }
}

.bloko-calendar__day_weekend {
    color: @calendar-weekend-color;
}

.bloko-calendar__day_today {
    border: 1px solid fade(@color-gray-80, 30%);

    &:hover {
        color: @color-blue-60;
        border: 1px solid fade(@color-blue-40, 30%);
        background-color: @calendar-background;
    }
}

.bloko-calendar__day_disabled,
.bloko-calendar__day_disabled:hover {
    color: @calendar-disabled-color;
    background-color: @calendar-background;
    cursor: auto;
}

.bloko-calendar__day_today.bloko-calendar__day_disabled {
    &:hover {
        border: 1px solid fade(@color-gray-80, 30%);
    }
}

.bloko-calendar__day_selected,
.bloko-calendar__day_selected:hover {
    color: @calendar-background;
    background: @color-blue-60;
    border: 0;
    z-index: 1;
}

.bloko-calendar__day_begin,
.bloko-calendar__day_begin:hover {
    .bloko-calendar-day-with-pointer(border-right);

    margin: 0 0 0 8px;

    &::after {
        .bloko-calendar-interval-pointer(right, border-left);
    }
}

.bloko-calendar__day_end,
.bloko-calendar__day_end:hover {
    .bloko-calendar-day-with-pointer(border-left);

    margin: 0 8px 0 0;

    &::before {
        .bloko-calendar-interval-pointer(left, border-right);
    }
}

.bloko-calendar__day_interval {
    background: @calendar-interval-color;
    margin: 0;
    box-sizing: content-box;
    border-width: 0 8px;
    border-style: solid;
    border-color: @calendar-interval-color;
}

.bloko-calendar__months {
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: space-between;
    height: 196px;
    padding: 20px @calendar-gap 0;
    margin: 0;
    list-style: none;
    line-height: 1.8;
    border-top: 1px solid @color-gray-20;
}

.bloko-calendar__month {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 85px;
    height: 40px;
    cursor: pointer;
    transition: @calendar-transition;

    &:hover {
        color: @color-blue-60;
        background-color: fade(@color-blue-60, 10%);
    }
}

.bloko-calendar__month-number {
    margin: 5px 0 -2px;
    color: @calendar-disabled-color;
    .bloko-text-small();
}

.bloko-calendar__month-number_selected {
    color: fade(@color-white, 40%);
}

.bloko-calendar__month-name {
    line-height: 16px;
}

.bloko-calendar__month_selected,
.bloko-calendar__month_selected:hover {
    color: @calendar-background;
    background: @color-blue-60;
}

.bloko-calendar__years {
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    height: 196px;
    padding-left: @calendar-gap;
    border-top: 1px solid @color-gray-20;
}

.bloko-calendar__years-range {
    color: @calendar-disabled-color;
    padding-top: 20px;
    margin-bottom: 6px;
}

.bloko-calendar__years-list {
    width: 240px;
    height: 98px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
}

.bloko-calendar__years-list-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 20px;
    cursor: pointer;
    transition: @calendar-transition;

    &:hover {
        color: @color-blue-60;
        background-color: fade(@color-blue-60, 10%);
    }
}

.bloko-calendar__years-list-item_selected,
.bloko-calendar__years-list-item_selected:hover {
    color: @calendar-background;
    background: @color-blue-60;
}