/* ── Button ──

   One button; its look says how much it asks for attention: --primary
   finishes the task (one per drawer or form), --secondary is every other
   action, --danger removes something. No border: the fill separates it from
   the ground. A transparent 1px edge keeps the box the size it had with one.
   The brand colour means "the one thing to do" or "on": a button marked
   aria-current (the page you are on) wears it too. */
.phx-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 1.25rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 150ms ease, color 150ms ease,
                box-shadow 200ms ease, transform 100ms ease;
}

.phx-button:active {
    transform: scale(0.98);
}

.phx-button--primary,
.phx-button[aria-current]:not([aria-current="false"]) {
    background: rgb(var(--color-primary-700));
    color: #fff;
}

.phx-button--primary:hover,
.phx-button[aria-current]:not([aria-current="false"]):hover {
    background: rgb(var(--color-primary-800));
}

/* What the box it sits in hands its controls (main.css). */
.phx-button--secondary {
    background: var(--phx-control-background);
    box-shadow: var(--phx-control-shadow);
    color: rgb(var(--color-surface-600));
}

.phx-button--secondary:hover {
    background: var(--phx-control-background-hover);
    box-shadow: var(--phx-control-shadow-hover);
}

/* Filled like --primary: the one step of its drawer or form, in red. */
.phx-button--danger {
    background: rgb(var(--color-destructive-700));
    color: #fff;
}

.phx-button--danger:hover {
    background: rgb(var(--color-destructive-800));
}

/* Disabled: faded, and deaf to hover and press. */
.phx-button:disabled,
.phx-button[aria-disabled="true"] {
    opacity: 0.38;
    pointer-events: none;
}

.phx-button--full {
    width: 100%;
}

/* Sizes, around the default (14px, about 36px tall). --xsmall: an action
   repeated on every row of a list. --small: an action beside other content (a
   top bar). --large: the one action a page leads to (a hero). */
.phx-button--xsmall {
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.6875rem;
}

.phx-button--xsmall svg {
    width: 0.75rem;
    height: 0.75rem;
}

.phx-button--small {
    padding: 0.375rem 1rem;
    font-size: 0.8125rem;
}

.phx-button--small svg {
    width: 1rem;
    height: 1rem;
}

.phx-button--large {
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    font-size: 0.9375rem;
}

.phx-button--large svg {
    width: 1.25rem;
    height: 1.25rem;
}

@media (prefers-color-scheme: dark) {
    .phx-button--secondary {
        color: rgb(var(--color-surface-300));
    }

    .phx-button--secondary:hover {
        color: rgb(var(--color-surface-200));
    }
}