.icon-button {
    display: inline-grid;
    width: var(--primary-action-height);
    height: var(--primary-action-height);
    flex: none;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    place-items: center;
    transition:
        background-color var(--action-swoosh-color-duration) ease-out,
        box-shadow var(--action-swoosh-color-duration) ease-out,
        opacity var(--action-swoosh-color-duration) ease-out,
        visibility var(--action-swoosh-color-duration) ease-out;
}

.icon-button:focus-visible {
    outline: 0.125rem solid var(--color-heading);
    outline-offset: 0.1875rem;
}

.icon-button__icon {
    width: var(--primary-action-icon-size);
    height: var(--primary-action-icon-size);
}

.icon-button--raised {
    background: var(--color-card);
    box-shadow: var(--surface-shadow);
}

.icon-button--quiet {
    border: var(--hairline-border);
}

.icon-button--quiet:hover {
    background: var(--color-card);
    box-shadow: var(--surface-shadow);
}

.icon-button:disabled {
    cursor: default;
    opacity: 0;
    visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .icon-button {
        transition: none;
    }
}