@charset "UTF-8";

.btn {
  padding: 6px 12px;
  border-radius: var(--app-panel-radius);
  font-size: var(--app-font-size-base);
  line-height: 1.42857143;
  text-decoration: none;
}

.btn:hover,
.btn:focus {
  text-decoration: none;
}

.btn-lg {
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 18px;
  line-height: 1.3333333;
}

.btn-sm {
  padding: 5px 10px;
  border-radius: 3px;
  font-size: 12px;
  line-height: 1.5;
}

.btn-primary {
  color: var(--app-color-white);
  border-color: var(--app-color-primary-muted-border);
  background-color: var(--app-color-link);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  color: var(--app-color-white);
  border-color: var(--app-color-primary-active-border);
  background-color: var(--app-color-primary-muted);
}

.btn-secondary,
.btn-default {
  color: var(--app-body-color);
  border-color: var(--app-border-button-default);
  background-color: var(--app-bg-surface);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-default:hover,
.btn-default:focus,
.btn-default:active {
  color: var(--app-body-color);
  border-color: var(--app-border-button-default-active);
  background-color: var(--app-bg-button-default-active);
}

.btn-success {
  color: var(--app-color-white);
  border-color: var(--app-border-button-success);
  background-color: var(--app-bg-button-success);
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
  color: var(--app-color-white);
  border-color: var(--app-border-button-success-active);
  background-color: var(--app-bg-button-success-active);
}

.btn-info {
  color: var(--app-color-white);
  border-color: var(--app-border-button-info);
  background-color: var(--app-bg-button-info);
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
  color: var(--app-color-white);
  border-color: var(--app-border-button-info-active);
  background-color: var(--app-bg-button-info-active);
}

.btn-warning {
  color: var(--app-color-white);
  border-color: var(--app-border-button-warning);
  background-color: var(--app-bg-button-warning);
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
  color: var(--app-color-white);
  border-color: var(--app-border-button-warning-active);
  background-color: var(--app-bg-button-warning-active);
}

.btn-danger {
  color: var(--app-color-white);
  border-color: var(--app-border-button-danger);
  background-color: var(--app-bg-button-danger);
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
  color: var(--app-color-white);
  border-color: var(--app-border-button-danger-active);
  background-color: var(--app-bg-button-danger-active);
}

.btn .bi {
  vertical-align: -0.05em;
}

.btn-group-safe {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}