@layer components {

    .button-primary {
        --btn-bg-color: var(--button-primary-bg-color);
        --btn-text-color: var(--button-primary-text-color);
        --btn-border: var(--button-primary-border);
    }
    .button-secondary {
        --btn-bg-color: var(--button-secondary-bg-color);
        --btn-text-color: var(--button-secondary-text-color);
        --btn-border: var(--button-secondary-border);
    }
    .button-contrary {
        --btn-bg-color: var(--button-contrary-bg-color);
        --btn-text-color: var(--button-contrary-text-color);
        --btn-border: var(--button-contrary-border);
    }
    .button-ghost {
        --btn-bg-color: transparent;
        --btn-text-color: var(--i-text-base-secondary);
        --btn-border: none;
    }
    .button-outline {
        --btn-bg-color: transparent;
        --btn-text-color: var(--i-text-base-secondary);
        --btn-border: solid 1px currentColor;
    }
    .button-sm {
        --input-height: 30px;
    }
    .button-lg {
        --input-height: 50px;
    }

}