// BUTTONS

.btn {
  font-family: $font-family-bold;
  text-transform: uppercase;

  &:not(.btn-link):not(.input-group-text) {
    @media (max-width: $screen-xs-max) {
      clear: both;
      display: block;
      width: 100%;
      margin-bottom: $space-default;
    }
  }

  &:focus,
  &.focus {
    box-shadow: none;
  }

  @include focus-visible-reset();

  &-primary {
    background-color: $button-primary-bg;
    border-color: $button-primary-border;

    &:hover,
    &:focus,
    &.focus {
      background-color: $CORPORATE-SECONDARY;
      border-color: $CORPORATE-SECONDARY;
      box-shadow: none;
    }

    &:focus-visible {
      box-shadow: none;
    }

    &.disabled,
    &:disabled {
      color: $text-color-secondary;
      background-color: $color-tertiary;
      border-color: $border-color-light;
      box-shadow: none;
      opacity: 0.65;
    }

    &:not(:disabled):not(.disabled):active,
    &:not(:disabled):not(.disabled).active {
      background-color: $input-accent-color;
      border-color: $input-accent-color;
      box-shadow: none;

      &:focus {
        box-shadow: none;
      }
    }
  }

  &-secondary {
    color: $button-default-color;
    background-color: $button-default-bg;
    border-color: $button-default-border;

    &:hover,
    &:focus,
    &.focus {
      color: $CORPORATE-SECONDARY;
      background-color: $color-tertiary;
      border-color: $CORPORATE-SECONDARY;
      box-shadow: none;
    }

    &:focus-visible {
      box-shadow: none;
    }

    &.disabled,
    &:disabled {
      color: $text-color-secondary;
      background-color: $button-default-bg;
      border-color: $border-color-light;
      box-shadow: none;
      opacity: 0.65;
    }

    &:not(:disabled):not(.disabled):active,
    &:not(:disabled):not(.disabled).active {
      color: $input-accent-color;
      background-color: $color-quaternary;
      border-color: $input-accent-color;
      box-shadow: none;

      &:focus {
        box-shadow: none;
      }
    }
  }

  &.btn-link {
    font-family: $font-family-regular;
    color: $link-color;
    text-transform: unset;
    text-decoration: none;
    border: none;
  }

  &.btn-link-inline {
    display: inline;
    padding: 0;
    line-height: inherit;
    vertical-align: baseline;
  }
}

.btn-lg {
  font-family: $font-family-condensedbold;
}

button.btn-link {
  font-family: $font-family-regular;
  color: $link-color;
  text-transform: unset;
  text-decoration: none;

  &.btn-tool {
    padding: 0;
    background-color: transparent;
    border: none;
  }

  &.btn-link-action {
    padding: 0;
    margin-bottom: 1px; // fix inline display
    font-size: unset;
  }

  &:hover,
  &:focus {
    color: $CORPORATE-SECONDARY;
    text-decoration: none;

    &:not(:focus-visible) {
      // remove shadow for non-keyboard :focus (shadow is kept if user uses the keyboard)
      box-shadow: none;
    }
  }
}

.details-tooltip,
.btn-link-with-icon {
  .ng-fa-icon {
    padding-left: 6px;
  }

  @include hover-none-underline();
}

.btn-link-with-icon {
  padding-left: 0;
}

// multiple buttons margin handling (use "button-group" in case the buttons are not direct siblings)
.button-group .btn,
.btn:not(:only-child):not(.btn-link) {
  margin-bottom: divide($space-default, 3);

  &:not(.float-end) {
    margin-right: divide($space-default, 3);

    @media (max-width: $screen-xs-max) {
      margin-right: 0;
    }
  }

  &.float-end {
    margin-left: divide($space-default, 3);

    @media (max-width: $screen-xs-max) {
      margin-left: 0;
    }
  }
}

.d-grid:has(> .btn:not(.btn-link)):not(:only-child) .btn {
  margin-bottom: divide($space-default, 3);

  &:not(.float-end) {
    @media (max-width: $screen-xs-max) {
      margin-right: 0;
    }
  }

  &.float-end {
    margin-left: divide($space-default, 3);

    @media (max-width: $screen-xs-max) {
      margin-left: 0;
    }
  }
}

// toggle link with width 100%
.btn-content-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;

  @include hover-none-underline();
}

.justify-content-end {
  .btn.btn-secondary {
    margin-right: 0;
  }
}