@layer components {
    :root {
        --day-and-night-check-status: var(--secondary-label);
    }

    .day-and-night-check {
        display: grid;
        gap: 0.5rem;
    }

    .day-and-night-check__status {
        color: var(--day-and-night-check-status);
        margin: 0;
        text-align: center;
    }

    .day-and-night-check__form {
        display: grid;
    }

    .day-and-night-check__button {
        inline-size: 100%;
        min-block-size: 3rem;
    }
}