:root {
    --btn-background: var(--color-bg);
}

.btn {
    align-items: center;
    background-color: var(--btn-background);
    border-radius: var(--btn-radius, var(--rounded-md));
    border: 1px solid var(--btn-border-color, var(--color-border));
    color: var(--btn-color, var(--color-text));
    cursor: pointer;
    display: inline-flex;
    font-size: var(--btn-font-size, var(--text-sm));
    font-weight: var(--btn-font-weight, var(--font-medium));
    gap: var(--size-2);
    inline-size: var(--btn-inline-size, auto);
    justify-content: var(--btn-justify-content, center);
    padding: var(--btn-padding, 0.5rem 1rem);
    text-align: center;
    white-space: nowrap;

    img:not([class]) {
        filter: var(--btn-icon-color, var(--color-filter-text));
    }

    &:hover {
        background-color: var(--btn-hover-color, oklch(from var(--btn-background) calc(l * .95) c h));
    }

    &:focus-visible {
        outline: var(--btn-outline-size, 2px) solid var(--color-selected-dark);
        outline-offset: var(--border-2);
    }

    &:is(:disabled, [aria-disabled]) {
        opacity: var(--opacity-50);
        pointer-events: none;
    }
}

.btn--primary {
    --btn-background: var(--color-primary);
    --btn-border-color: transparent;
    --btn-color: var(--color-text-reversed);
    --btn-icon-color: var(--color-filter-text-reversed);
}

.btn--secondary {
    --btn-background: var(--color-secondary);
    --btn-border-color: transparent;
}

.btn--borderless {
    --btn-border-color: transparent;
}

.btn--positive {
    --btn-background: var(--color-positive);
    --btn-border-color: transparent;
    --btn-color: white;
    --btn-icon-color: invert(1);
}

.btn--negative {
    --btn-background: var(--color-negative);
    --btn-border-color: transparent;
    --btn-color: white;
    --btn-icon-color: invert(1);
}

.btn--plain {
    --btn-background: transparent;
    --btn-border-color: transparent;
    --btn-hover-color: transparent;
    --btn-padding: 0;
}

.btn--danger {
    --btn-color: var(--red-600);
    --btn-icon-color: invert(23%) sepia(99%) saturate(2213%) hue-rotate(348deg) brightness(90%) contrast(92%);
}

.btn--icon {
    --btn-padding: var(--size-2);
    --btn-radius: var(--rounded-full);
}

[aria-busy] .btn--loading:disabled {
    > * {
        visibility: hidden;
    }

    &::after {
        filter: var(--btn-icon-color, var(--color-filter-text));
    }

    &::after {
        animation: spin 1s linear infinite;
        background-image: url("/assets/loader-circle-62ffe31e.svg");
        background-size: cover;
        block-size: var(--size-4);
        content: "";
        inline-size: var(--size-4);
        position: absolute;
    }
}