:root {
    --yb-button-link--padding: var(--spacing-xs) var(--spacing-sm);
    --yb-button-link--font-size: var(--font-size);
    --yb-button-link--border-radius: var(--border-radius-small);

    --yb-button-link--primary-bg: var(--primary-color);
    --yb-button-link--primary-color: #ffffff;
    --yb-button-link--primary-border: var(--primary-color);

    --yb-button-link--white-bg: #ffffff;
    --yb-button-link--white-color: var(--primary-text-color);
    --yb-button-link--white-border: var(--primary-text-color);

    --yb-button-link--black-bg: #000000;
    --yb-button-link--black-color: #ffffff;
    --yb-button-link--black-border: #000000;

    --yb-button-link--transparent-bg: transparent;
    --yb-button-link--transparent-color: var(--primary-text-color);
    --yb-button-link--transparent-border: var(--primary-text-color);
}

.yb_button_link__button {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    padding: var(--yb-button-link--padding);
    font-size: var(--yb-button-link--font-size);
    border-radius: var(--yb-button-link--border-radius);
    border: 1px solid;
    cursor: pointer;
    transition: all 0.2s ease;
}

.yb_button_link__button--primary {
    background-color: var(--yb-button-link--primary-bg);
    color: var(--yb-button-link--primary-color);
    border-color: var(--yb-button-link--primary-border);
}

.yb_button_link__button--white {
    background-color: var(--yb-button-link--white-bg);
    color: var(--yb-button-link--white-color);
    border-color: var(--yb-button-link--white-border);
}

.yb_button_link__button--black {
    background-color: var(--yb-button-link--black-bg);
    color: var(--yb-button-link--black-color);
    border-color: var(--yb-button-link--black-border);
}

.yb_button_link__button--transparent {
    background-color: var(--yb-button-link--transparent-bg);
    color: var(--yb-button-link--transparent-color);
    border-color: var(--yb-button-link--transparent-border);
}