$tb-date-picker-color--background: transparent !default;
$tb-date-picker-color--text: #333 !default;
$tb-date-picker-color--border: #f0f0f0 !default;

$tb-date-picker-color--hover-background: #eee !default;
$tb-date-picker-color--hover-text: #111 !default;
$tb-date-picker-color--hover-border: #eee !default;

$tb-date-picker-color--disabled-background: transparent !default;
$tb-date-picker-color--disabled-text: #ddd !default;
$tb-date-picker-color--disabled-border: #f0f0f0 !default;

$tb-date-picker-color--active-background: #00af9b !default;
$tb-date-picker-color--active-border: darken($tb-date-picker-color--active-background, 2%) !default;
$tb-date-picker-color--active-text: #fff !default;

$tb-date-picker-color--selected-background: darken($tb-date-picker-color--active-background, 10%) !default;
$tb-date-picker-color--selected-border: darken($tb-date-picker-color--active-background, 10%) !default;
$tb-date-picker-color--selected-text: #fff !default;

$tb-date-picker-color--highlight: black !default;

.dp {
    padding: 0 18px;
    max-width: 340px;
    width: 100%;
}

.dp-permanent .dp {
    box-shadow: none;
    border-radius: 0;
    border: 0 none;
}

.dp::before {
    display: none;
}

.dp-cal-header {
    background-color: transparent;
    display: flex;
    padding: 14px 0;
    justify-content: center;
}

.dp-cal-footer {
    background-color: transparent;
    padding: 14px 0;
}

.dp-prev,
.dp-next {
    border: 1px solid theme('colors.gray.400');
    display: inline-block;
    top: 14px;
}

.dp-prev {
    left: 0;
    justify-self: left;
}

.dp-next {
    right: 0;
    justify-self: right;
}

.dp-days {
    display: flex;
    flex-wrap: wrap;
}

.dp-col-header {
    text-transform: none;
}

.dp-day,
.dp-col-header {
    position: relative;
    text-align: center;
    padding: 8px 0;
}

.dp-day {
    background-color: $tb-date-picker-color--background;
    color: $tb-date-picker-color--text;
    border: 1px solid $tb-date-picker-color--border;
    border-radius: 0;
}

.dp-day-today::after {
    top: -1px;
    right: -1px;
    border-top-color: $tb-date-picker-color--highlight;
    border-right-color: $tb-date-picker-color--highlight;
}

.dp-day.dr-selected,
.dp-day.dr-in-range,
.dr-cals .dr-in-range,
.dr-cals .dp-current:hover,
.dr-cals .dr-in-range:hover {
    background-color: $tb-date-picker-color--active-background;
    border-color: $tb-date-picker-color--active-border;
    color: $tb-date-picker-color--active-text;
}

.dp-year.dp-current,
.dp-month.dp-current {
    background-color: $tb-date-picker-color--active-background;
    color: $tb-date-picker-color--active-text;
}

.dp-day.dr-selected,
.dp-selected:hover,
.dp-selected:focus,
.dp-day.dr-in-range:last-of-type,
.dp-day.dr-in-range:last-of-type:hover,
.dr-cals .dr-in-range:focus,
.dr-cals .dr-selected:focus,
.dr-cals .dr-selected:hover,
.dr-cals .dr-selected {
    background-color: $tb-date-picker-color--selected-background;
    border-color: $tb-date-picker-color--selected-border;
    color: $tb-date-picker-color--selected-text;
}

.dp-day:hover,
.dp-month:hover,
.dp-year:hover,
.dp-current:focus,
.dp-month:focus,
.dp-year:focus {
    background-color: $tb-date-picker-color--hover-background;
    border-color: $tb-date-picker-color--hover-border;
    color: $tb-date-picker-color--hover-text;
}

.dp-close:hover,
.dp-close:focus,
.dp-clear:hover,
.dp-clear:focus,
.dp-today:hover,
.dp-today:focus,
.dp-next:hover,
.dp-next:focus,
.dp-prev:hover,
.dp-prev:focus,
.dp-cal-month:focus,
.dp-cal-month:hover,
.dp-cal-year:hover,
.dp-cal-year:focus {
    background-color: $tb-date-picker-color--hover-background;
    border-color: $tb-date-picker-color--hover-border;
    color: $tb-date-picker-color--hover-text;
}

.dp-day-disabled,
.dr-cals .dp-day-disabled,
.dr-cals .dp-day-disabled:focus {
    background-color: $tb-date-picker-color--disabled-background;
    border-color: $tb-date-picker-color--disabled-border;
    color: $tb-date-picker-color--disabled-text;
}

.dp-day-disabled {
    pointer-events: none;
}

.dp-cal-month,
.dp-cal-year,
.dp-day,
.dp-month,
.dp-year {
    border-radius: 0;
}

.dp-cal-month,
.dp-cal-year {
    font-size: theme('fontSize.base');
    font-weight: bold;
    padding: 0;
    height: 30px;
    line-height: 30px;
    color: $tb-date-picker-color--text;
}

.dp-cal-month:hover,
.dp-cal-year:hover {
    background-color: transparent;
    color: $tb-date-picker-color--hover-text;
}

.dp-cal-month {
    margin-right: 1ch;
}

.dp-month {
    width: 50%;
}

// RANGE
.dr-cals {
    padding-top: 0;
    box-shadow: none;
    border-radius: 0;
    border: 0 none;
}

.dr-cals::before {
    display: none;
}

.dr-cal-end .dp {
    border-left: 0 none;
}

.dr-cal-start,
.dr-cal-end {
    width: 100%;
}

/*
 * The following media query is required to override
 * the default style.
 */
@media (max-width: 616px), (max-height: 480px) {
    .dr-cal-end {
        display: block;
    }

    .dr-cal-start .dp-next {
        visibility: hidden;
    }
}

.dp-permanent {
    min-width: 300px;
    width: 100%;
}

@media (max-width: 610px) {
    .dr-cal-end {
        display: none;
    }

    .dr-cal-start .dp-next {
        visibility: visible;
    }
}

@media (max-width: 340px) {
    .dp-permanent {
        min-width: 250px;
    }
}
