.btn {
  //btn-css-vars
  --bs-btn-color: $primary;
  --bs-btn-hover-color: #21632d; // TODO change with tokens when available
  --bs-btn-active-color: #1f5c2a; // TODO change with tokens when available
}
.btn-outline {
  &-primary {
    box-shadow: inset 0 0 0 1px $primary;
    &.disabled {
      box-shadow: inset 0 0 0 1px color-hover($primary);
    }
  }
  &-secondary {
    box-shadow: inset 0 0 0 1px $secondary;
    &.disabled,
    &:hover,
    &:active {
      box-shadow: inset 0 0 0 1px color-hover($secondary);
    }
  }
  &-success {
    box-shadow: inset 0 0 0 1px $success;
    color: adjust-color($success, $lightness: -15%);
    &.disabled,
    &:hover,
    &:active {
      box-shadow: inset 0 0 0 1px color-hover($success);
    }
  }
  &-warning {
    box-shadow: inset 0 0 0 1px $color-border-warning;
    color: adjust-color($warning, $lightness: -25%);
    &.disabled,
    &:hover,
    &:active {
      box-shadow: inset 0 0 0 1px color-hover($color-border-warning);
    }
  }
  &-danger {
    box-shadow: inset 0 0 0 1px $danger;
    &.disabled,
    &:hover,
    &:active {
      box-shadow: inset 0 0 0 1px color-hover($danger);
    }
  }
}

//.btn {
//&:not(.btn-outline-primary, .btn-outline-secondary) {
//box-shadow: none;
//}
//}

.btn-xs {
  padding: 8px 16px;
  font-weight: 600;
}

.btn-sm {
  padding: 10px 20px;
  font-size: $btn-font-size-sm;
  line-height: $input-btn-line-height-sm;
}

.btn-lg {
  padding: 14px 28px;
  font-size: $btn-font-size-lg;
  line-height: $input-btn-line-height-lg;
}

.btn-tag {
  padding: 3px 12px;
  font-size: $btn-font-size-xs;
  line-height: $input-btn-line-height-xs;
  border-radius: 16px;
  font-weight: 600;
}
.btn-icon {
  span {
    & + * {
      margin-left: 0.25em;
    }
  }
}

.btn-link {
  border: none;
  font-weight: 600;
  color: $primary !important;
  text-decoration: none;

  &:active,
  &.active {
    text-decoration: underline;
  }
}

.it25-btn-group-mobile {
  background: #f4f5f6;
  border: 1px solid #baccd9;
  border-radius: $border-radius;
  .btn-check:checked + .btn {
    background: $white;
    border-radius: $border-radius;
    opacity: 0.7;

    &.right {
      box-shadow: 3px 0px 4px rgba(0, 0, 0, 0.25);
    }
    &.left {
      box-shadow: -3px 0px 4px rgba(0, 0, 0, 0.25);
    }
  }

  .it25-btn-check {
    color: $primary-blue;
    opacity: 0.3;
  }
}
.btn-mobile-radius {
  border-radius: $border-radius;
}