/* ==========================================================================
   Config
   ========================================================================== */
@use "sass:math";

$color-btn-primary--bg: $primary-blue !default;
$color-btn-primary--text: white !default;
$color-btn-primary--hover: $primary-blue !default;
$color-btn-primary--disabled: $neutral-light !default;
$color-btn-primary--disabled-text: $neutral-base !default;
$color-btn-warning--bg: #da4f49 !default;
$color-btn-warning--hover: #bd362f !default;
$color-btn-warning--text: white !default;
$color-btn-default-light--bg: #eaeaea !default;
$color-btn-default-light--text: #444 !default;
$color-btn-default-light--hover: #d3d3d3 !default;
$color-btn-default-dark--bg: #777 !default;
$color-btn-default-dark--text: white !default;
$color-btn-default-dark--hover: #5e5e5e !default;
$color-btn-contained--bg: white !default;
$btn-border-radius: 3px !default;

/* ==========================================================================
   Styles
   ========================================================================== */
.gui-button {
  border: none;
  border-radius: $btn-border-radius;
  display: inline-block;
  font-weight: $typo-weight-roman;
  padding: ($layout-spacing-base * 0.5 + 1px) ($layout-spacing-base - 2px);
  transition: all $animation-time-micro ease, padding 0s;
  text-decoration: none;

  &:hover {
    text-decoration: none;
  }

  &:focus {
    outline: 0;
  }

  & + &,
  & + .gui-dropdown {
    margin-left: $layout-spacing-base * 0.5;
  }
}

.gui-button__helper {
  border-bottom: 1px dotted;
  margin-left: $layout-spacing-base * 0.25;
}

// a.gui-button--primary to overwrite bootstrap a:not(.gui-button-base):hover
.gui-button--primary,
a.gui-button--primary {
  background: $primary-blue;
  color: $color-btn-primary--text;
  border-radius: 6px;

  &:hover,
  &:focus {
    background: $primary-blue-lighter;
    color: $color-btn-primary--text;
    box-shadow: 0 3px 4px -2px rgb(61 138 235 / 50%),
      inset 0 -2px 0 0 $primary-blue;
  }

  &:active {
    transition: none;
    background: $primary-blue-darker;
    box-shadow: inset 0 2px 0 0 #2662ab;
  }

  &:focus {
    color: $color-btn-primary--text;
  }

  .gui-icon path {
    fill: $color-btn-primary--text;
  }
}

.gui-button--link,
.gui-button--link-default,
.gui-button--link-danger,
.gui-button--link-white,
.gui-button--link-underline,
.gui-button--link-no-underline {
  background: transparent;

  &:focus {
    outline: none;
    text-decoration: underline;
  }

  &:hover {
    background: transparent;
    color: $color-btn-primary--hover;
    text-decoration: underline;
  }
}

.gui-button--link-no-underline:hover {
  text-decoration: none;
}

.gui-button--link-default {
  color: $color-brand-blue;

  &:hover {
    color: $color-brand-blue;
  }
}

.gui-button--link-danger {
  color: $color-text-danger;

  &:hover {
    color: $color-text-danger;
    text-decoration: underline;
  }
}

.gui-button--link-white {
  color: white;

  &:hover {
    color: white;
    text-decoration: underline;
  }
}

.gui-button--link-underline {
  text-decoration: underline;
}

// a.gui-button--danger to overwrite bootstrap a:not(.gui-button-base):hover
.gui-button--danger,
a.gui-button--danger {
  background: $primary-red;
  color: $color-btn-warning--text;

  .gui-icon path {
    fill: $color-btn-warning--text;
  }

  &:hover {
    color: $color-btn-warning--text;
    background: $primary-red-lighter;
    box-shadow: 0 3px 4px -2px rgb(252 92 84 / 50%),
      inset 0 -2px 0 0 $primary-red;
  }

  &:active {
    transition: none;
    background: $primary-red-darker;
    box-shadow: inset 0 2px 0 0 #bd453e;
  }

  &:focus {
    color: $color-btn-warning--text;
  }
}

.gui-button--light-grey {
  background: $color-btn-default-light--bg;
  color: $color-btn-default-light--text;

  &:hover {
    background: $color-btn-default-light--hover;
    color: $color-btn-default-light--text;
  }
}

.gui-button--dark-grey {
  background: $color-btn-default-dark--bg;
  color: $color-btn-default-dark--text;

  &:hover {
    background: $color-btn-default-dark--hover;
    color: $color-btn-default-dark--text;
  }
}

.gui-button--purple-text {
  background: white;
  color: $primary-purple;

  .gui-icon path {
    fill: $primary-purple;
  }
}

.gui-button--slim {
  padding: $layout-spacing-base * 0.1 $layout-spacing-base * 0.5;

  .gui-icon {
    margin-left: math.div($layout-spacing-base, 3);
    vertical-align: text-bottom;
  }
}

.gui-button--clear {
  background: none;
  padding: 0;

  &:hover {
    background: none;
  }

  &:focus {
    outline: none;
  }
}

.gui-button--has-tooltip {
  display: inline-block;
}

.gui-button--size-sm {
  font-size: $typo-size-slight;
  padding: $layout-spacing-base * 0.25 $layout-spacing-base * 0.5;
}

.gui-button--icon-only,
.gui-button--icon-only-padding {
  &:not(.gui-button--danger) {
    background: none;
  }

  border: none;
  box-shadow: none;
  padding: 0;
  transition: transform $animation-time-micro $animation-curve;
  line-height: 0;

  &:focus {
    outline: none;
  }
}

.gui-button--icon-only-padding {
  padding-left: $layout-spacing-base * 0.25;
}

.gui-button--icon-only-cover {
  &:hover {
    background: $color-background-light;
  }

  &.gui-is-active {
    svg path {
      fill: $color-text-base;
    }
  }
}

.gui-button--white {
  background-color: white;
  border: 1px solid $neutral-light;
  width: 100%;
  text-align: left;
  box-shadow: $shadow-shallow;

  &:hover {
    background-color: $neutral-lightest;
  }

  &:focus {
    outline: none;
  }
}

.gui-button--contained {
  border: 1px solid $color-border-base;
  border-radius: 100%;
  padding: $layout-spacing-base * 0.5;
  background-color: $color-btn-contained--bg;
  box-shadow: $shadow-shallow;
}

.gui-button--hover-transform {
  &:hover {
    transform: scale(1.1);
  }
}

.gui-button--outline {
  border: 1px solid $color-border-base;
  outline: none;
  background: none;

  &:focus {
    background: $neutral-lightest;
    border-color: $neutral-base;
  }

  &:hover,
  &.gui-is-active {
    background: none;
    border-color: $primary-blue;
    color: $primary-blue;

    path {
      fill: $primary-blue;
    }
  }
}

.gui-button--outline-default {
  border: 2px solid $primary-blue;
  background: none;
  color: $primary-blue;

  &:hover {
    color: lighten($primary-blue, 20%);
    border-color: lighten($primary-blue, 10%);
  }

  &:active {
    color: $primary-blue-darker;
    border-color: $primary-blue-darker;
  }

  &:focus {
    outline: lighten($primary-blue, 20%) $layout-spacing-base * 0.25 auto;
    outline-offset: -2px;
  }
}

.gui-button--collapse {
  padding: 0;

  & + & {
    margin-left: 0;
  }
}

.gui-button__wrapper {
  display: flex;

  .gui-button {
    margin: 0;
    vertical-align: middle;
  }

  .gui-button__wrapper--icon {
    height: 100%;
  }

  &--size-sm {
    .gui-button__wrapper--icon {
      height: $layout-spacing-base * 0.5 + $layout-spacing-base;
    }

    .gui-button {
      font-size: $typo-size-slight;
      padding: $layout-spacing-base * 0.25 $layout-spacing-base * 0.5;
    }
  }
}

.gui-button__wrapper--button {
  border-radius: $btn-border-radius 0 0 $btn-border-radius;
  border-right: $primary-blue-darker 1px solid;

  &:disabled {
    border-color: $color-btn-primary--disabled-text;
  }
}

.gui-button__wrapper--icon {
  padding: $layout-spacing-base * 0.5 + 3;
  line-height: 0;
  border-radius: 0 $btn-border-radius $btn-border-radius 0;
}

.gui-button:disabled {
  background: $color-btn-primary--disabled;
  color: $color-btn-primary--disabled-text;
  box-shadow: none;

  .gui-icon path {
    fill: $color-btn-primary--disabled-text;
  }

  &:hover {
    text-decoration: none;
  }

  &.gui-button--link,
  &.gui-button--link-default,
  &.gui-button--link-underline,
  &.gui-button--link-danger,
  &.gui-button--icon-only {
    background: transparent;
  }

  &.gui-button--link,
  &.gui-button--link-danger {
    cursor: not-allowed;
    color: $color-btn-primary--disabled;

    &:hover {
      color: $color-btn-primary--disabled;
    }
  }

  &.gui-button--icon-only {
    opacity: 0.5;
  }
}

.gui-button--medium {
  font-size: $typo-size-base;
}

.gui-button--input-appendage {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  white-space: nowrap;
  background-color: $primary-blue-lighter;
}

.gui-button--padding-small {
  padding: math.div($layout-spacing-base, 3) $layout-spacing-base * 0.5;
}