//
// Buttons
// --------------------------------------------------


// Base styles
// ---------------------
.btn {
  --btn-height: var(--spacing-08);
  --btn-line-height: var(--btn-height);
  transition: var(--transition-all-productive);
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  height: var(--btn-height);
  line-height: var(--btn-line-height);
  font-size: 14px;
  padding: 0 var(--spacing-05);
  gap: var(--spacing-03);
  justify-content: space-between;
  width: fit-content;
  .outline();
  &:hover {
    border: 1px solid transparent;
  }
  &,
  &:active,
  &.active {
    box-shadow: none;
    color: var(--text-primary);
    &:focus,
    &.focus {
      outline: 2px solid transparent;
    }
  }

  span {
    display: flex;
    align-items: center;
    min-width: 0;
    > span {margin-right: 8px;}
  }

  // reset icon width
  i {
    min-width: 13px;
    order: 2;
    line-height: inherit;
    font-size: calc(1em - 1px);
    vertical-align: -.05em;
  }

  // caret
  // ---------------------
  > .caret {
    margin-top: -1px;
  }

  // Rounded buttons
  // ---------------------
  &.btn-rounded {
    border-radius: @input-height-base;
    padding-left: (@padding-base-horizontal + 4);
    padding-right: (@padding-base-horizontal + 4);
  }

  // Circle buttons
  // ---------------------
  &.btn-circle {
    width: @input-height-base;
    padding-left: 0;
    padding-right: 0;
    border-radius: 50%;

    &.btn-lg { width: (@input-height-large + 1); }
    &.btn-sm { width: (@input-height-small - 1); }
    &.btn-xs { width: (@input-height-small - 9); }
  }

  // Outline buttons
  // ---------------------
  &.btn-outline {
    background-color: transparent;
    border-width: 1px;

    &.btn-primary { color: @brand-primary; }
    &.btn-success { color: @brand-success; }
    &.btn-warning { color: @brand-warning; }
    &.btn-danger { color: @brand-danger; }
    &.btn-info { color: @brand-info; }
  }

  &.btn-block, &.btn-wide {width: 100%;}
}

.btn ~ .btn,
.btn ~ .btn-group,
.btn-group ~ .btn,
.btn-group ~ .btn-group {
  margin-left: 5px;
}

// Hierarchycal buttons
// ---------------------------------

/// Primary
.btn-primary, .btn-primary + .dropdown-toggle {
  .button-variant(
    @background: var(--button-primary),
    @text-color: var(--text-on-color),
    @border-color: var(--button-primary),
    @hover-background: var(--button-primary-hover),
    @hover-text-color: var(--text-on-color),
    @active-background: var(--button-primary-active),
    @disabled-background: var(--button-disabled),
    @disabled-text-color: var(--text-on-color-disabled)
  );

  /// Primary danger
  &.btn-danger {
    .button-variant(
      @background: var(--button-danger-primary),
      @text-color: var(--text-inverse),
      @border-color: var(--button-danger-primary),
      @hover-background: var(--button-danger-hover),
      @hover-text-color: var(--text-inverse),
      @active-background: var(--button-danger-active),
      @disabled-background: var(--button-disabled),
      @disabled-text-color: var(--text-on-color-disabled)
    );
  }
}

/// Secondary
.btn-secondary {
  .button-variant(
    @background: var(--button-secondary),
    @text-color: var(--button-secondary-text),
    @border-color: var(--button-secondary),
    @hover-background: var(--button-secondary-hover),
    @hover-text-color: var(--button-secondary-text),
    @active-background: var(--button-secondary-active),
    @disabled-background: var(--button-disabled),
    @disabled-text-color: var(--text-on-color-disabled)
  );
}

/// Tertiary + automatic error fixes
.btn-tertiary {
  .button-variant(
    @background: transparent,
    @text-color: var(--button-tertiary),
    @border-color: var(--button-tertiary),
    @hover-background: var(--button-tertiary-hover),
    @hover-text-color: var(--text-on-color),
    @active-background: var(--button-tertiary-active),
    @disabled-background: transparent,
    @disabled-text-color: var(--text-disabled)
  );

  /// Tertiary danger
  &.btn-danger {
    .button-variant(
      @background: transparent,
      @text-color: var(--button-danger-secondary),
      @border-color: var(--button-danger-secondary),
      @hover-background: var(--button-danger-hover),
      @hover-text-color: var(--text-inverse),
      @active-background: var(--button-danger-active),
      @disabled-background: var(--button-disabled),
      @disabled-text-color: var(--text-disabled)
    );
  }
}

.btn-primary,
.btn-secondary,
.btn-tertiary {
  padding-left: var(--spacing-05);
  padding-right: var(--spacing-10);
  gap: var(--spacing-07);
  &:has(i) {padding-right: var(--spacing-05);}
  &.btn--icon-only {
    padding-right: 0;
    span { width: initial;}
  }
  span {
    justify-content: space-between;
    gap: var(--spacing-07);
    width: 100%;
    height: var(--btn-line-height);
  }
}

/// Ghost
.btn-ghost {
  .button-variant(
    @background: transparent,
    @text-color: var(--link-primary),
    @border-color: transparent,
    @hover-background: var(--background-hover),
    @hover-text-color: var(--link-primary-hover),
    @active-background: var(--background-active),
    @disabled-background: transparent,
    @disabled-text-color: var(--text-disabled)
  );
  padding-inline: var(--spacing-05);
  justify-content: center;
  span {gap: var(--spacing-03);}

  //// Ghost Danger
  &.btn-danger,
  &.btn-danger.btn--icon-only {
    .button-variant(
      @background: transparent,
      @text-color: var(--button-danger-secondary),
      @border-color: transparent,
      @hover-background: var(--button-danger-hover),
      @hover-text-color: var(--text-inverse),
      @active-background: var(--button-danger-active),
      @disabled-background: transparent,
      @disabled-text-color: var(--text-disabled)
    );
  }

  //// Ghost icon only
  &.btn--icon-only {
    .button-variant(
      @background: transparent,
      @text-color: var(--icon-primary),
      @border-color: transparent,
      @hover-background: var(--background-hover),
      @hover-text-color: var(--icon-primary),
      @active-background: var(--background-active),
      @disabled-background: transparent,
      @disabled-text-color: var(--icon-disabled)
    );

    &.btn-toggletip { color: inherit; }
  }
}

// Ghost icon only
.btn--icon-only {
  justify-content: center;
  padding: 0;
  align-items: center;
  aspect-ratio: 1 / 1;
}

.btn-toggletip {
  height: auto;
  line-height: 1em;
  padding: 2px;
}

// Standard sizes
.btn-xs, .btn[size="xs"] { --btn-height: var(--spacing-06); }
.btn-sm, .btn[size="sm"] { --btn-height: var(--spacing-07); }
.btn-md, .btn[size="md"] { --btn-height: var(--spacing-08); }
.btn-lg, .btn[size="lg"] { --btn-height: var(--spacing-09); }
.btn-xl, .btn[size="xl"] { --btn-height: var(--spacing-10); --btn-line-height: var(--spacing-08); align-items: flex-start; }
.btn-2xl, .btn[size="2xl"] { --btn-height: var(--spacing-11); --btn-line-height: var(--spacing-08); align-items: flex-start; }

// Fix for outline
.dropdown-toggle,
.dropdown-menu > .active > a,
.open > a,
.btn-group .dropdown-toggle,
.btn-group.open .dropdown-toggle,
.navbar-toggle {
  .outline();
}

// Link buttons
// -------------------------

// Make a button look and behave like a link
.btn-link {
  --btn-height: auto;
  font-weight: @btn-font-weight;
  color: var(--link-primary);
  height: var(--btn-height);
  line-height: var(--btn-line-height);
  padding: 0 var(--spacing-05);
  &:hover,
  &:focus { text-decoration: none; }

  span {
    position: relative;
  }

  span:before {
    content: '';
    position: absolute;
    background-color: transparent;
    pointer-events: none;
    width: 100%;
    height: 1px;
    bottom: -1px;
    transition: var(--transition-all-productive);
  }

  i { font-size: calc(1em + 2px); }

  &:hover {
    span:before {
      background-color: var(--link-primary-hover);
    }
  }

  &:hover,
  &:focus { 
    text-decoration: none;
  }
}

.btn-info {
  color: @gray-dark;
  &:hover { color: @gray-dark; }
}

// Back to index button
.btn-back {
  gap: var(--spacing-02);
  font-size: 92%;
  i { order: unset; }
}

// Modal footer buttons
.modal-footer {
  .modal-form-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 1px;
    margin: -15px;
    
    .btn {
      align-items: flex-start;
      height: var(--spacing-10);
      width: var(--spacing-13);
      border-radius: 0;
      &:only-child { flex-grow: 1; }
    }
    .btn + .btn { margin: 0; }
    &:has(.btn:nth-child(2)):not(:has(.btn:nth-child(3))) .btn { flex-grow: 0.5; }
    &:has(.btn:nth-child(3)) .btn { min-width: 25%; }
  }
}

// Popover footer
.footer-buttons {
  margin-bottom: -15px;
  .btn {
    align-items: flex-start;
    min-width: 0;
    width: var(--spacing-13);
    border-radius: 0;
    &:first-child { border-radius: 0 0 0 var(--border-radius-md); }
    &:last-child { border-radius: 0 0 var(--border-radius-md) 0; }
    &:only-child {
      border-radius: 0 0 calc(var(--border-radius-md) + 3px) calc(var(--border-radius-md) + 3px);
      flex-grow: 1;
    }
  }
  .btn + .btn { margin: 0; }
  &:has(.btn:nth-child(2)):not(:has(.btn:nth-child(3))) .btn { flex-grow: 0.5; }
}
