/* Automations page: only what the app's compiled utility classes don't cover. */

.auto-list {
    width: 300px;
}

/* the toggle sits over its row's top-right corner, outside the row button */
.auto-item-toggle {
    position: absolute;
    top: 8px;
    right: 8px;
}

.auto-sep {
    width: 1px;
    height: 16px;
    background: var(--color-line);
}

.auto-instructions {
    display: block;
    resize: none;
}

.auto-tab {
    height: 32px;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--color-ink-muted);
    cursor: pointer;
    transition: color 0.16s var(--ease-out-strong), border-color 0.16s var(--ease-out-strong);
}

.auto-tab:hover {
    color: var(--color-ink);
}

.auto-tab[aria-selected="true"] {
    border-bottom-color: var(--color-ink);
    color: var(--color-ink);
}

.auto-tab:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

.auto-card-dashed {
    border-style: dashed;
}

.auto-chevron {
    transition: transform 0.2s var(--ease-out-strong);
}

.auto-chevron.is-open {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .auto-tab,
    .auto-chevron {
        transition: none;
    }
}

.auto-card {
    min-height: 124px;
}

.auto-empty {
    height: 120px;
}

/* ---- Notifications page ---- */

/* native time and number fields, in the chip style of the dropdowns beside them */
.notif-field {
    font-variant-numeric: tabular-nums;
}

:root[data-theme=dark] .notif-field {
    color-scheme: dark;
}

.notif-field:disabled {
    opacity: 0.5;
}

.notif-field:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

.notif-minutes {
    width: 56px;
}

/* settings row: at least as tall as the Automations rows, taller when its text wraps */
.notif-row {
    min-height: 58px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.notif-link:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

.notif-link:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* the "?" beside a row title: smaller than a normal icon button so it sits on the text line */
.notif-help {
    width: 18px;
    height: 18px;
    margin: -1px -2px;
    color: var(--color-ink-subtle);
}

/* a row that belongs to the row above it */
.notif-sub {
    padding-left: 28px;
    background: var(--color-sunken);
}

/* save bar: floats at the bottom of the scrolling page, centred on the content column */
.notif-bar {
    position: sticky;
    bottom: 0;
    z-index: 10;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    animation: var(--animate-pop-in);
}

@media (prefers-reduced-motion: reduce) {
    .notif-bar {
        animation: none;
    }
}