.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-around;
  height: 36px;
  &:disabled {
    color: gray("600");
    fill: currentColor;
    box-shadow: none !important;
    &:not(.btn-link) {
      border-color: gray("400");
      background-color: gray("400");
    }
  }
  &svg {
    padding-right: 8px;
  }
}

.btn-md {
  width: 220px;
  height: 36px;
}

.btn-lg {
  width: 290px;
  height: 36px;
}

.btn-danger,
.btn-primary {
  background-color: $red-brand-primary;
  border-radius: 8px;
  border: none;
  box-shadow: 1px 2px 2px -1px rgb(79 37 37 / 40%) inset;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  &:hover {
    background-color: $red-brand-primary-hover;
  }
  &:not(:disabled):not(.disabled):active:focus,
  &:focus-visible {
    border: none;
    box-shadow: none;
    background-color: $red-brand-primary-click;
  }
  &:focus {
    border: none;
    box-shadow: 0px 0px 0px 4px rgba(225, 23, 23, 0.5);
    background-color: $red-brand-primary;
  }
  &:active {
    border: none;
    box-shadow: none;
    background-color: $red-brand-primary;
  }
}

.btn-secondary,
.modal-header button {
  background-color: $faint-secondary-primary-5;
  color: $red-brand-primary;
  border-radius: 8px;
  border: none;
  box-shadow: 1px 2px 4px -1px rgb(79 37 37 / 10%) inset;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  &:hover {
    background-color: $faint-secondary-primary-5-hover;
    color: $red-brand-primary;
  }
  &:focus {
    border: none;
    box-shadow: 0px 0px 0px 4px rgba(225, 23, 23, 0.5);
    color: $red-brand-primary;
    background-color: $faint-secondary-primary-5;
  }
  &:not(:disabled):not(.disabled):active:focus,
  &:focus-visible {
    border: none;
    box-shadow: none;
    color: $red-brand-primary;
    background-color: $faint-secondary-primary-20;
  }
  // style for standard close button in modal and popups
  &.close {
    width: 32px;
    height: 22px;
    padding: 0px;
    margin: 0px;
    background-color: $faint-secondary-primary-1;
    border: 1px solid $faint-secondary-primary-10;
    border-radius: 7px;
    &:hover {
      background-color: $faint-secondary-primary-2;
    }
  }
}

.btn-unstyled {
  border: none;
  &:focus {
    box-shadow: none;
  }
  &:active {
    box-shadow: none;
  }
}

.btn-popover {
  border: none;
  color: $red-brand-primary;
  height: 28px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 12px;
  transition: ease-in 0.2s;
  &:hover {
    color: $white;
    transition: ease-in 0.2s;
  }
  &:focus {
    box-shadow: none;
  }
  &:active {
    box-shadow: none;
  }
  &.selected-unit-button {
    transition: ease-in 0.2s;
    color: $white;
  }
  &.selected-choice-button {
    transition: ease-in 0.2s;
    color: $white;
  }
}

.btn-toogle-popover {
  justify-content: flex-start;
  width: 25px;
  height: 16px;
  padding: 0;
  &:focus {
    box-shadow: none;
  }
  &:active {
    box-shadow: none;
  }
}

.btn-link {
  color: $text-primary;
  text-decoration: none !important;
  &:hover {
    background-color: gray("200");
    color: theme-color("primary");
  }
  &:active {
    background-color: gray("300");
  }
  &:disabled {
    box-shadow: $btn-focus-box-shadow;
  }
  &.collapsed {
    .icon-expand {
      transform: rotate(180deg);
      transition: 0.3s linear;
    }
    .icon-expand-right {
      transform: rotate(180deg);
      transition: 0.3s linear;
    }
  }
}

// Icon only buttons
.btn-icon-only svg {
  margin-right: 0;
}

// Datepicker, clear search and Password toggle buttons
.input-action-btn,
.btn-datepicker {
  position: absolute;
  right: 0;
  top: 0;
  z-index: $zindex-dropdown + 1;
}

// Contain input buttons within input
.btn-datepicker .dropdown-toggle,
.input-action-btn {
  padding: 7px;
  margin: 1px;
}

.collapse-button {
  height: 56px;
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  gap: 8px;
  &:active,
  &:focus {
    box-shadow: none;
  }
  &:hover {
    color: $text-primary;
  }
}

.table-toolbar-button {
  width: 220px;
  height: 36px;
}