.btn {
    padding: var(--padding-extra-small) var(--padding-small);
    border: 2px solid transparent;
    border-radius: var(--border-radius-medium);
    font-size: var(--font-size-button);
}
.btn i {
    margin-left: var(--margin-extra-small);
}
.btn.btn-icon i {
    margin-left: 0;
}
.btn.btn-sm {
    padding: var(--padding-tiny) var(--padding-small);
    border-radius: var(--border-radius-medium);
    font-size: var(--font-size-button-small);
    font-weight: bold;
}

.btn-card {
    background: #FFF;
    text-decoration: none;
    line-height: 100%;
    padding: 0.6rem 1.2rem 0.55rem;
    border: 1px solid var(--color-border) !important;
    color:var(--bs-body-color);
}

.btn-card i {
    display:inline-block;
    position:relative;
    top:1px;
}

a {
    color: var(--color-emphasis);
    text-decoration: none; 
}
a:hover {
    color: var(--color-emphasis);
    text-decoration: underline;
}
a:focus {
    color: var(--color-emphasis);
    text-decoration: underline;
    outline: none;
}
a:active {
    color: var(--color-emphasis);
    text-decoration: none;
}
a:disabled,
a.disabled {
    color: var(--color-light-tint-700);
    text-decoration: none;
}

/* Bootstrap override */
.btn-check:checked+.btn:focus-visible, .btn.active:focus-visible, .btn.show:focus-visible, .btn:first-child:active:focus-visible, :not(.btn-check)+.btn:active:focus-visible {
    box-shadow: none;
}

.btn-primary {
    --background-color: var(--color-primary-tint-100);
    --border-color: var(--color-primary-tint-300);
    --box-shadow-color: var(--color-primary-tint-700);
    --color: var(--color-body);
}
.btn-secondary {
    --background-color: var(--color-secondary-tint-50);
    --border-color: var(--color-secondary-tint-600);
    --box-shadow-color: transparent;
    --color: var(--color-body);
}
.btn-info {
    --background-color: var(--color-info-tint-100);
    --border-color: var(--color-info-tint-300);
    --box-shadow-color: var(--color-info-tint-700);
    --color: var(--color-body);
}
.btn-success {
    --background-color: var(--color-success-tint-100);
    --border-color: var(--color-success-tint-300);
    --box-shadow-color: var(--color-success-tint-700);
    --color: var(--color-body);
}
.btn-warning {
    --background-color: var(--color-warning-tint-100);
    --border-color: var(--color-warning-tint-300);
    --box-shadow-color: var(--color-warning-tint-700);
    --color: var(--color-body);
}
.btn-danger {
    --background-color: var(--color-danger-tint-100);
    --border-color: var(--color-danger-tint-300);
    --box-shadow-color: var(--color-danger-tint-700);
    --color: var(--color-body);
}

.btn-light {
    --background-color: var(--color-light-tint-10);
    --border-color: var(--color-danger-tint-100);
    border: 2px solid var(--border-color);
    --box-shadow-color: transparent;
    --color: var(--color-danger-tint-700);
}
.btn-light:hover {
    --background-color: var(--color-light-tint-100);
    --border-color: var(--color-danger-tint-300);
    --color: var(--color-danger-tint-700);
}
.btn-light:focus,
.btn-light:focus-visible {
    --background-color: var(--color-danger-tint-700);
    --border-color: var(--color-danger-tint-300);
    --color: var(--color-light-tint-10);
}
.btn-light.active,
.btn-light:active {
    --background-color: var(--color-danger-tint-100);
    --color: var(--color-danger-tint-700);
    --border-color: transparent;
}

.btn-dark {
    --background-color: var(--color-light-tint-10);
    --border-color: var(--color-dark-tint-700);
    border: 2px solid var(--border-color);
    --box-shadow-color: transparent;
    --color: var(--color-dark-tint-700);
}
.btn-dark:hover {
    --background-color: var(--color-dark-tint-100);
    --border-color: var(--color-dark-tint-300);
}
.btn-dark:focus,
.btn-dark:focus-visible {
    --background-color: var(--color-dark-tint-700);
    --border-color: var(--color-dark-tint-300);
    --color: var(--color-light-tint-10);
}
.btn-dark.active,
.btn-dark:active {
    --background-color: var(--color-dark-tint-700);
    --color: var(--color-light-tint-10);
    --border-color: transparent;
}
.btn.disabled {
    --background-color: var(--color-light-tint-100);
    --border-color: transparent;
    --box-shadow-color: transparent;
    --color: var(--color-light-tint-700);
}
.btn-light.disabled,
.btn-dark.disabled {
    --background-color: var(--color-light-tint-100);
    --border-color: var(--color-light-tint-700);
    --color: var(--color-light-tint-700);
}

.btn {
    background: var(--background-color);
    color: var(--color);
}
.btn.disabled {
    background: var(--background-color);
    border: 2px solid var(--border-color);
    color: var(--color);
}
.btn:hover {
    background: var(--background-color);
    border: 2px solid var(--border-color);
    color: var(--color);
    text-decoration: none;
}
.btn.active,
.btn:active,
.btn:first-child:active {
    background: var(--background-color);
    background-color: var(--background-color) !important;
    color: var(--color);
    box-shadow: 0px -2px 0px 0px inset var(--box-shadow-color);
    border-color: var(--border-color);
}
.btn:focus,
.btn:focus-visible {
    background: var(--background-color);
    border: 2px solid var(--border-color);
    color: var(--color);
    box-shadow: 0px -2px 0px 0px inset var(--box-shadow-color);
}



/* Lesson button */
.term-explanation-content .term-link {
    border: 1px solid rgba(0, 0, 0, 0.2);
    font-size: var(--font-size-button-small);
    font-weight: bold;
    text-decoration: none;
    margin-top: 0.625rem;
    padding: 0.125rem 0.625rem;
}