/* -------------------------------- 

File#: _1_date-picker
Title: Date Picker
Descr: Input element used to select a date
Usage: codyhouse.co/license

-------------------------------- */
:root {
    --date-picker-trigger-width: 2.5em;
    /* calendar button width */
    --date-picker-icon-size: 1em;
    /* calendar icon size */
    /* calendar */
    --date-picker-calendar-gap: 4px;
    /* distance between input and calendar */
    --date-picker-calendar-padding: var(--space-2xs);
    /* calendar padding */
    --date-picker-calendar-item-size: 2em;
    /* calendar date size */
    --date-picker-calendar-item-radius: var(--radius-md)/* calendar date border radius */
}

@media (min-width: 48rem) {
    :root {
        --date-picker-calendar-item-size:2.5em
    }
}

.date-input,.date-input__wrapper {
    position: relative
}

/* calendar button */
.date-input__trigger {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    height: 100%;
    width: var(--date-picker-trigger-width);
    display: none;
    /* hide button if JS is not enabled */
    transition: 0.2s
}

.date-input__trigger .icon {
    display: block;
    width: var(--date-picker-icon-size);
    height: var(--date-picker-icon-size);
    margin: auto
}

.date-input__trigger:hover {
    color: var(--color-primary)
}

.date-input__trigger:active {
    transform: translateY(2px)
}

.date-input__trigger {
    display: flex
}

.date-input__text {
    padding-right: calc(var(--date-picker-trigger-width) + var(--space-3xs))
}

.date-input--hide-calendar .date-input__trigger {
    /* hide calendar trigger when flexbox is not supported */
    display: none
}

.date-picker {
    display: inline-block;
    position: absolute;
    left: 0;
    top: calc(var(--date-picker-calendar-gap) + 100%);
    background-color: var(--color-bg-light);
    border-radius: var(--radius-md);
    box-shadow: var(--inner-glow),var(--shadow-md);
    padding: var(--date-picker-calendar-padding);
    z-index: var(--z-index-popover, 5);
    -webkit-user-select: none;
    user-select: none;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 0.2s,opacity 0.2s
}

.date-picker--is-visible {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.2s
}

/* month navigation */
.date-picker__month {
    /* wrapper */
    position: relative
}

.date-picker__month-label {
    /* month name */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    color: var(--color-contrast-higher)
}

.date-picker__month-nav,.date-picker__week,.date-picker__dates {
    display: flex;
    flex-wrap: wrap
}

.date-picker__month-nav li,.date-picker__week li,.date-picker__dates li {
    width: var(--date-picker-calendar-item-size);
    height: var(--date-picker-calendar-item-size)
}

.date-picker__month-nav {
    position: relative;
    z-index: 1;
    justify-content: space-between
}

.date-picker__month-nav-btn {
    width: 100%;
    height: 100%;
    border-radius: var(--date-picker-calendar-item-radius);
    color: var(--color-contrast-low);
    /* icon color */
    transition: transform 0.2s
}

.date-picker__month-nav-btn .icon {
    display: block;
    margin: auto
}

.date-picker__month-nav-btn:hover {
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.075);
    color: var(--color-contrast-higher)
}

.date-picker__month-nav-btn:active {
    transform: translateY(2px)
}

/* list of week days */
/* day of the week */
.date-picker__day {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--text-sm);
    color: var(--color-contrast-low)
}

/* list of dates */
.date-picker__dates {
    width: calc(var(--date-picker-calendar-item-size) * 7)
}

/* date button */
.date-picker__date {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: var(--text-sm)
}

.date-picker__date:focus {
    outline: none;
    background-color: var(--color-bg-light);
    box-shadow: inset 0 0 0 2px hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2);
    color: var(--color-contrast-higher)
}

.date-picker__date:focus,.date-picker__date:hover,.date-picker__date.date-picker__date--selected {
    border-radius: var(--date-picker-calendar-item-radius)
}

.date-picker__date.date-picker__date--range {
    background-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2);
    color: var(--color-contrast-higher)
}

.date-picker__date.date-picker__date--range:focus,.date-picker__date.date-picker__date--range:hover {
    border-radius: 0
}

.date-picker__date.date-picker__date--range:focus {
    background-color: var(--color-bg-light)
}

.date-picker__date.date-picker__date--selected,.date-picker__date.date-picker__date--range-start,.date-picker__date.date-picker__date--range-end {
    background-color: var(--color-primary);
    box-shadow: 0 2px 4px hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.3);
    color: var(--color-white);
    z-index: 2
}

.date-picker__date.date-picker__date--selected:focus:not(:hover),.date-picker__date.date-picker__date--range-start:focus:not(:hover),.date-picker__date.date-picker__date--range-end:focus:not(:hover) {
    box-shadow: 0 0 0 2px hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2),0 2px 4px hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.3)
}

.date-picker__date.date-picker__date--range-start {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px
}

.date-picker__date.date-picker__date--range-end {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px
}

.date-picker__date:hover {
    background-color: var(--color-bg-light);
    box-shadow: inset 0 0 0 2px var(--color-primary);
    color: var(--color-contrast-high)
}

.date-picker__date--today {
    color: var(--color-primary)
}

.date-picker__date::-moz-focus-inner {
    /* remove Firefox dotted-outline focus effect */
    border: none
}

.date-input {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10; /* pour passer au-dessus si besoin */
   /*pointer-events: none; optionnel si ce n'est pas cliquable */
}