/* Champ date natif : placeholder grisé + croix de réinitialisation.
   Cible tout `input[type="date"]`, le wrapper étant construit par date-input.js. */

.toolkit-date-input {
    position: relative;
    display: block;
    width: 100%;
}

.toolkit-date-input > input[type="date"] {
    width: 100%;
    /* Place réservée pour la croix et l'icône calendrier */
    padding-right: 4rem;
    /* Ombre transparente plus large que le halo de focus : Chrome repeint toute
       la zone au blur, sinon une ligne du halo reste parfois sous le champ. */
    box-shadow: var(--bulma-input-shadow, inset 0 .0625em .125em hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), .05)),
        0 0 0 0.375em transparent;
}

.toolkit-date-input > input[type="date"]:focus,
.toolkit-date-input > input[type="date"]:focus-within {
    box-shadow: var(--bulma-input-focus-shadow-size) hsla(var(--bulma-input-focus-h), var(--bulma-input-focus-s), var(--bulma-input-focus-l), var(--bulma-input-focus-shadow-alpha)),
        0 0 0 0.375em transparent;
}

.toolkit-date-input > input[type="date"]:disabled,
.toolkit-date-input > input[type="date"][readonly] {
    box-shadow: 0 0 0 0.375em transparent;
}

/* Calendrier collé au bord droit, la croix apparaît à sa gauche : pas de vide
   à droite tant qu'elle est masquée. Centré sans transform. */
.toolkit-date-input > input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0.75rem;
    margin: auto 0;
    cursor: pointer;
    opacity: 0.55;
}

.toolkit-date-input > input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* « jj/mm/aaaa » affiché comme un placeholder tant que le champ est vide */
.toolkit-date-input.is-empty > input[type="date"] {
    color: var(--bulma-input-placeholder-color, rgba(54, 54, 54, 0.3));
}

/* Croix à gauche du calendrier : son apparition ne décale pas le calendrier. */
.toolkit-date-input__clear {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 2.25rem;
    margin: auto 0;
    z-index: 4;
}

.toolkit-date-input.is-empty > .toolkit-date-input__clear,
.toolkit-date-input > input:disabled ~ .toolkit-date-input__clear,
.toolkit-date-input > input[readonly] ~ .toolkit-date-input__clear {
    display: none;
}

/* Firefox : l'icône calendrier reste dans la zone de contenu (non positionnable).
   Padding droit standard pour la coller au bord, la croix se place à sa gauche. */
@supports (-moz-appearance: none) {
    .toolkit-date-input > input[type="date"] {
        padding-right: var(--bulma-control-padding-horizontal, calc(0.75em - 1px));
    }
}