.btn {
    position: relative;
    display: inline-block;
    padding: 0.4rem 1rem;
    font-weight: 500;
    line-height: 1.25rem;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid;
    border-radius: 0.375rem;
    appearance: none;
    text-decoration: none;
    transition-property: color, background-color, border-color;
}

.btn {
    color: var(--color-btn-text);
    background-color: var(--color-btn-bg);
    border-color: var(--color-btn-border);
}

.btn:hover {
    background-color: var(--color-btn-hover-bg);
    border-color: var(--color-btn-hover-border);
    transition-duration: 0.1s;
}

.btn-primary {
    color: var(--color-btn-primary-text);
    background-color: var(--color-btn-primary-bg);
    border-color: var(--color-btn-primary-border);
}

.btn-primary:hover {
    background-color: var(--color-btn-primary-hover-bg);
    border-color: var(--color-btn-primary-hover-border);
}