/* Icons for the Tempus Dominus date picker (assets/controllers/datepicker_controller.js).
 *
 * Tempus Dominus ships with Font Awesome class names for its navigation and
 * action buttons, but this project has no icon font - so those buttons render
 * as invisible empty spans. We override every icon slot with a `td-icon-*`
 * class and paint it here with an inline Flowbite-outline SVG via CSS mask,
 * so each icon inherits the surrounding `currentColor` (light + dark safe). */

.td-icon {
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    background-color: currentColor;
    -webkit-mask: center / contain no-repeat;
    mask: center / contain no-repeat;
    vertical-align: -0.15em;
}

/* calendar - the input toggle button */
.td-icon-calendar {
    -webkit-mask-image: var(--td-mask-calendar);
    mask-image: var(--td-mask-calendar);
}

/* chevron-left / chevron-right - month & year navigation */
.td-icon-previous {
    -webkit-mask-image: var(--td-mask-previous);
    mask-image: var(--td-mask-previous);
}

.td-icon-next {
    -webkit-mask-image: var(--td-mask-next);
    mask-image: var(--td-mask-next);
}

/* bottom action buttons */
.td-icon-today {
    -webkit-mask-image: var(--td-mask-today);
    mask-image: var(--td-mask-today);
}

.td-icon-clear {
    -webkit-mask-image: var(--td-mask-clear);
    mask-image: var(--td-mask-clear);
}

.td-icon-close {
    -webkit-mask-image: var(--td-mask-close);
    mask-image: var(--td-mask-close);
}

:root {
    --td-mask-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 10h16M8 2v4m8-4v4M6 4h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E");
    --td-mask-previous: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m15 19-7-7 7-7'/%3E%3C/svg%3E");
    --td-mask-next: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m9 5 7 7-7 7'/%3E%3C/svg%3E");
    --td-mask-today: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 10h16M8 2v4m8-4v4M6 4h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm3 10 2 2 4-4'/%3E%3C/svg%3E");
    --td-mask-clear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 7h14m-9 3v8m4-8v8M10 3h4a1 1 0 0 1 1 1v3H9V4a1 1 0 0 1 1-1ZM6 7h12v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7Z'/%3E%3C/svg%3E");
    --td-mask-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 18 17.94 6M18 18 6.06 6'/%3E%3C/svg%3E");
}