@layer components {
    .hours-table {
        width: 100%;
        border-collapse: collapse;
        font-family: var(--font-data);
        font-size: var(--size-small);
    }

    .hours-table th {
        text-align: start;
        font-weight: 500;
        padding: var(--space-1) var(--space-3) var(--space-1) 0;
        color: var(--fog);
        font-family: var(--font-body);
    }

    .hours-table td {
        padding: var(--space-1) 0;
    }

    .hours-table .is-today th,
    .hours-table .is-today td {
        color: var(--sky-deep);
        font-weight: 600;
    }

    .hours-closed {
        color: var(--fog);
    }

    .open-now {
        color: var(--moss);
        font-weight: 600;
    }

    .closed-now {
        color: var(--kalyna);
        font-weight: 600;
    }
}