@layer components {
    :root {
        --beacons-pad-report: var(--label);
        --beacons-pad-count: var(--secondary-label);
    }

    .beacons-pad {
        display: grid;
        gap: 0.5rem;
    }

    .beacons-pad__status {
        display: grid;
        gap: 0.25rem;

        &:empty {
            display: none;
        }
    }

    .beacons-pad__report {
        color: var(--beacons-pad-report);
        margin: 0;
    }

    .beacons-pad__count {
        color: var(--beacons-pad-count);
        margin: 0;
        text-align: center;
    }

    .beacons-pad__check {
        display: grid;
    }

    .beacons-pad__check-button {
        inline-size: 100%;
        min-block-size: 3rem;
    }
}