/*
 * The plugin's two widgets.
 *
 * Deliberately small and unopinionated: a shop's own template decides what its
 * buttons and badges look like, and a plugin that imposes its own palette looks
 * bolted on. Everything here inherits the template's colours and font, and the
 * only fixed decisions are spacing and the shape of the badge.
 *
 * A store owner who wants something else overrides these classes in their
 * template's own stylesheet — or drops a `swoo_custom.css` next to this file,
 * which the shop loads in place of it.
 */

.swoo-notify {
    margin: 0.75rem 0;
}

.swoo-notify__button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid currentColor;
    border-radius: 0.25rem;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 1.4;
    cursor: pointer;
}

.swoo-notify__button:hover:not(:disabled) {
    opacity: 0.8;
}

.swoo-notify__button:disabled {
    cursor: progress;
    opacity: 0.6;
}

.swoo-notify__button[aria-pressed='true'] {
    border-style: solid;
    font-weight: 600;
}

.swoo-notify__check {
    display: inline-flex;
}

.swoo-loyalty {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.5rem 0;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    /* currentColor at low opacity, so the badge picks up whatever the template
       sets around it instead of introducing a colour of its own. */
    background: rgba(127, 127, 127, 0.12);
    font-size: 0.875em;
    line-height: 1.5;
}

.swoo-loyalty--basket {
    margin-top: 0.75rem;
}