/*
 * The two shared styles for the controls a user clicks, and the rule that
 * hides an element marked x-cloak. Every page loads this file after
 * tailwind.css. It is plain CSS: make css does not build it.
 *
 * A button is btn-primary, btn-secondary or btn-danger, from input.css.
 * A secondary or inline action, such as Copy beside an entrypoint URL or
 * Edit beside a target, is btn-small.
 *
 * Each card on the webhook list is a card-elevated link as a whole. It
 * shows an Open label in btn-small and takes btn-small's focus outline.
 *
 * The rules join tailwind.css's components layer, where input.css puts
 * its own, so a utility class on an element still overrides them.
 */
@layer components {
    /* input.css gives its buttons no pointer cursor. */
    .btn-primary,
    .btn-secondary,
    .btn-danger {
        cursor: pointer;
    }

    .btn-small {
        display: inline-flex;
        align-items: center;
        padding: 0.25rem 0.625rem;
        border: 1px solid var(--color-gray-300);
        border-radius: var(--radius-md);
        background-color: var(--color-white);
        color: var(--color-primary-700);
        font-size: var(--text-xs);
        line-height: 1rem;
        font-weight: var(--font-weight-medium);
        cursor: pointer;
    }

    .btn-small:hover {
        border-color: var(--color-primary-500);
        background-color: var(--color-primary-50);
    }

    .btn-small:focus-visible,
    .card-elevated:focus-visible {
        outline: 2px solid var(--color-primary-500);
        outline-offset: 2px;
    }
}

/*
 * Alpine.js removes x-cloak from an element once it has started, so
 * something Alpine hides is not seen on the page while it loads.
 */
[x-cloak] {
    display: none !important;
}