@import '../../../less/fonts';
@import '../../../less/palette';
@import '../../../less/mixins';

.date-range-picker {
    @week-height: 36px;
    @picker-padding: 10px;
    @months-height: 480px;

    position: relative;
    z-index: -10;

    >.button {
        width: 100%;
        margin-top: 8px;
    }

    .background {
        background-color: white;
        border: 1px solid @color-border;
        border-radius: 3px;

        position: relative;
        z-index: -1;
    }

    .days-of-week {
        .bold;
        user-select: none;
        cursor: default;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-around;
        z-index: 10;
        height: @week-height;
        line-height: @week-height;
        padding: 0 @picker-padding;
        border-bottom: 1px solid @color-border;
        color: @color-hint;

        > span {
            text-align: center;
        }
    }

    .months {
        @fadeout-height: 40px;

        .standard-transition(height);
        overflow-y: scroll;
        height: @months-height;
        margin-top: @week-height;
        padding: 0 @picker-padding @fadeout-height;

        &:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 2px;
            right: 2px;
            height: @fadeout-height;
            background: linear-gradient(to top, white, transparent);
            pointer-events: none;
        }
    }
}
