.btn-reset {
    padding: 0;
    margin: 0;
    border: 0;
    background-color: transparent;
}

.ui-btn {
    --w: 100%;
    --h: 42px;
    --border-w: 1px;
    --border-clr: transparent;
    --text: var(--tmpl-text);
    --leading: var(--tmpl-leading);
    --py: var(--tmpl-p-xs);
    --px: var(--tmpl-p-xl);

    border: var(--border-w) solid var(--border-clr);
    padding: calc(var(--py) - var(--border-w)) calc(var(--px) - var(--border-w));
    display: flex;
    text-align: center;
    align-self: baseline;
    justify-content: center;
    align-items: center;
    gap: var(--tmpl-gap-xs);
    font-weight: 400;
    font-size: var(--text);
    line-height: var(--leading);
    border-radius: var(--tmpl-border-radius-lg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: var(--w);
    height: var(--h);
}

.ui-btn--sm {
    --px: var(--tmpl-p-xs);
}

.ui-btn--rounded {
    border-radius: var(--tmpl-border-radius-xs);
}

.ui-btn--primary {
    color: var(--txt-white);
    background: var(--blue);
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.ui-btn--secondary {
    background: var(--light-blue);
    transition: border-color 0.3s ease-in-out;
}

.ui-btn--outline {
    background: var(--light-blue);
    transition: border-color 0.3s ease-in-out;
    --border-clr: var(--blue);
}

.ui-btn--rounded {
    border-radius: var(--tmpl-border-radius-xs);
}


.ui-btn--primary-outline {
    color: var(--blue);
    --border-clr: var(--blue);
    transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}


@media (hover: hover) {
    .ui-btn--primary:hover {
        color: var(--txt-white);
        background: var(--dark-blue);
        text-decoration: none;
    }
    .ui-btn--secondary:hover {
        --border-clr: var(--blue);
    }

    .ui-btn--outline:hover {
        --border-clr: transparent;
    }

    .ui-btn--primary-outline:hover {
        color: var(--txt-white);
        background: var(--blue);
    }
}