/* =============================================================================
   WebTasks icon masks
   -----------------------------------------------------------------------------
   Icons render as a mask over `currentColor`, so they inherit text color and can
   be sized via the --wt-icon-size custom property. This file is intentionally a
   regular (non-scoped) stylesheet so the relative url() paths resolve against
   wwwroot/icons/. Consumed by the <Icon> component (Components/UI/Icon.razor).
   Each icon maps a name -> its SVG via the private --_i custom property.
   ========================================================================== */

/* ---- Material Symbols icon font (Mission Control). Use as <span class="ms">check</span> ---- */
@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(/_content/WebTasks.Shared/fonts/material-symbols.woff2) format('woff2');
}

.ms {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 1.25em;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    direction: ltr;
    flex: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    font-variation-settings: 'opsz' 24;
    -webkit-user-select: none;
    user-select: none;
}

.wt-icon {
    display: inline-block;
    inline-size: var(--wt-icon-size, 1.25em);
    block-size: var(--wt-icon-size, 1.25em);
    background-color: currentColor;
    -webkit-mask: var(--_i) no-repeat center / contain;
    mask: var(--_i) no-repeat center / contain;
    flex: none;
    vertical-align: middle;
}

/* ---- existing ---- */
.wt-icon--arrow-down { --_i: url(/_content/WebTasks.Shared/icons/arrow-down.svg); }
.wt-icon--arrow-up { --_i: url(/_content/WebTasks.Shared/icons/arrow-up.svg); }
.wt-icon--calendar { --_i: url(/_content/WebTasks.Shared/icons/calendar.svg); }
.wt-icon--check { --_i: url(/_content/WebTasks.Shared/icons/check.svg); }
.wt-icon--checkbox-check { --_i: url(/_content/WebTasks.Shared/icons/checkbox-check.svg); }
.wt-icon--clock { --_i: url(/_content/WebTasks.Shared/icons/clock.svg); }
.wt-icon--edit { --_i: url(/_content/WebTasks.Shared/icons/edit.svg); }
.wt-icon--flag { --_i: url(/_content/WebTasks.Shared/icons/flag.svg); }
.wt-icon--list { --_i: url(/_content/WebTasks.Shared/icons/list.svg); }
.wt-icon--plus { --_i: url(/_content/WebTasks.Shared/icons/plus.svg); }
.wt-icon--trash { --_i: url(/_content/WebTasks.Shared/icons/trash.svg); }
.wt-icon--trash-simple { --_i: url(/_content/WebTasks.Shared/icons/trash-simple.svg); }
.wt-icon--x { --_i: url(/_content/WebTasks.Shared/icons/x.svg); }

/* ---- new ---- */
.wt-icon--refresh { --_i: url(/_content/WebTasks.Shared/icons/refresh.svg); }
.wt-icon--settings { --_i: url(/_content/WebTasks.Shared/icons/settings.svg); }
.wt-icon--search { --_i: url(/_content/WebTasks.Shared/icons/search.svg); }
.wt-icon--view-column { --_i: url(/_content/WebTasks.Shared/icons/view-column.svg); }
.wt-icon--view-agenda { --_i: url(/_content/WebTasks.Shared/icons/view-agenda.svg); }
.wt-icon--drag-handle { --_i: url(/_content/WebTasks.Shared/icons/drag-handle.svg); }
.wt-icon--chevron-down { --_i: url(/_content/WebTasks.Shared/icons/chevron-down.svg); }
.wt-icon--chevron-right { --_i: url(/_content/WebTasks.Shared/icons/chevron-right.svg); }
.wt-icon--bell { --_i: url(/_content/WebTasks.Shared/icons/bell.svg); }
.wt-icon--pin { --_i: url(/_content/WebTasks.Shared/icons/pin.svg); }
.wt-icon--repeat { --_i: url(/_content/WebTasks.Shared/icons/repeat.svg); }
.wt-icon--play { --_i: url(/_content/WebTasks.Shared/icons/play.svg); }
.wt-icon--link { --_i: url(/_content/WebTasks.Shared/icons/link.svg); }
.wt-icon--attachment { --_i: url(/_content/WebTasks.Shared/icons/attachment.svg); }
.wt-icon--subtask { --_i: url(/_content/WebTasks.Shared/icons/subtask.svg); }
.wt-icon--info { --_i: url(/_content/WebTasks.Shared/icons/info.svg); }
.wt-icon--warning { --_i: url(/_content/WebTasks.Shared/icons/warning.svg); }
.wt-icon--palette { --_i: url(/_content/WebTasks.Shared/icons/palette.svg); }
.wt-icon--contrast { --_i: url(/_content/WebTasks.Shared/icons/contrast.svg); }
.wt-icon--sun { --_i: url(/_content/WebTasks.Shared/icons/sun.svg); }
.wt-icon--moon { --_i: url(/_content/WebTasks.Shared/icons/moon.svg); }
.wt-icon--chevron-up { --_i: url(/_content/WebTasks.Shared/icons/chevron-up.svg); }
.wt-icon--science { --_i: url(/_content/WebTasks.Shared/icons/science.svg); }
.wt-icon--cloud-off { --_i: url(/_content/WebTasks.Shared/icons/cloud-off.svg); }
.wt-icon--link-off { --_i: url(/_content/WebTasks.Shared/icons/link-off.svg); }
.wt-icon--save { --_i: url(/_content/WebTasks.Shared/icons/save.svg); }
.wt-icon--error { --_i: url(/_content/WebTasks.Shared/icons/error.svg); }
.wt-icon--tag { --_i: url(/_content/WebTasks.Shared/icons/tag.svg); }
.wt-icon--alarm { --_i: url(/_content/WebTasks.Shared/icons/alarm.svg); }
.wt-icon--today { --_i: url(/_content/WebTasks.Shared/icons/today.svg); }
.wt-icon--weekend { --_i: url(/_content/WebTasks.Shared/icons/weekend.svg); }
.wt-icon--block { --_i: url(/_content/WebTasks.Shared/icons/block.svg); }
.wt-icon--sunrise { --_i: url(/_content/WebTasks.Shared/icons/sunrise.svg); }
.wt-icon--chevron-left { --_i: url(/_content/WebTasks.Shared/icons/chevron-left.svg); }