/* Roster staff slot highlight states. Loaded after roster state styles so staff locate wins over conflicts. */

.roster-grid .slot-time-cell {
    min-width: 0;
    padding: 0 !important;
}

.roster-shift-card.is-roster-staff-slot-highlighted,
.roster-shift-card.is-roster-staff-slot-highlighted-start,
.roster-shift-card.is-roster-staff-slot-highlighted-end,
.roster-grid [role="gridcell"].is-roster-staff-slot-highlighted {
    --roster-staff-highlight-depth-fill: var(--roster-staff-highlight-cell-fill);
    --roster-staff-highlight-depth-start: color-mix(in srgb, var(--roster-staff-highlight-depth-fill) 78%, var(--app-white-alpha-08));
    --roster-staff-highlight-depth-end: color-mix(in srgb, var(--roster-staff-highlight-depth-fill) 94%, var(--app-bg));
    background: linear-gradient(180deg, var(--roster-staff-highlight-depth-start), var(--roster-staff-highlight-depth-end)) !important;
    color: var(--app-text) !important;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--app-white) 12%, transparent),
        inset 0 -1px 0 color-mix(in srgb, var(--app-bg) 22%, transparent) !important;
    text-shadow: 0 1px 0 color-mix(in srgb, var(--app-bg) 38%, transparent);
}

.roster-shift-card.is-roster-staff-slot-highlighted,
.roster-shift-card.is-roster-staff-slot-highlighted-start,
.roster-shift-card.is-roster-staff-slot-highlighted-end {
    --roster-staff-highlight-depth-fill: var(--roster-staff-highlight-fill);
    border-color: color-mix(in srgb, var(--app-accent) 52%, var(--app-border-strong)) !important;
}

.roster-shift-card.is-roster-staff-slot-highlighted .roster-shift-card-field,
.roster-shift-card.is-roster-staff-slot-highlighted-start .roster-shift-card-field,
.roster-shift-card.is-roster-staff-slot-highlighted-end .roster-shift-card-field {
    --roster-staff-highlight-depth-fill: var(--roster-staff-highlight-cell-fill);
    background: linear-gradient(180deg, var(--roster-staff-highlight-depth-start), var(--roster-staff-highlight-depth-end)) !important;
    color: var(--app-text) !important;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--app-white) 12%, transparent),
        inset 0 -1px 0 color-mix(in srgb, var(--app-bg) 22%, transparent) !important;
    text-shadow: 0 1px 0 color-mix(in srgb, var(--app-bg) 38%, transparent);
}