@layer marielco-buttons {
    .marielco-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-inline-size: min(100%, var(--marielco-button-width));
        max-inline-size: 100%;
        min-block-size: var(--marielco-control-height);
        padding: var(--marielco-control-padding-block) var(--marielco-control-padding-inline);
        border: var(--marielco-border-width) solid var(--marielco-border-color);
        border-radius: var(--marielco-radius);
        background: var(--marielco-button-background, var(--marielco-white));
        color: var(--marielco-button-color, var(--marielco-black));
        font-family: inherit;
        font-size: var(--marielco-text-control);
        font-weight: var(--marielco-weight-medium);
        line-height: var(--marielco-line-control);
        letter-spacing: var(--marielco-tracking-control);
        text-align: center;
        text-decoration: none;
        overflow-wrap: anywhere;
        cursor: pointer;
    }

    .marielco-button--primary {
        --marielco-button-background: var(--marielco-black);
        --marielco-button-color: var(--marielco-white);
    }

    .marielco-button--secondary {
        --marielco-button-background: var(--marielco-white);
        --marielco-button-color: var(--marielco-black);
    }

    .marielco-button:where(:disabled, [aria-disabled="true"]) {
        --marielco-button-background: var(--marielco-white);
        --marielco-button-color: var(--marielco-text-muted);
        cursor: not-allowed;
    }
}