//
// Button base styles
//

.btn {
  // scss-docs-start btn-css-vars
  --#{$prefix}btn-padding-top: #{$btn-padding-top};
  --#{$prefix}btn-padding-bottom: #{$btn-padding-bottom};
  --#{$prefix}btn-border-width: 0;
  --#{$prefix}btn-border-color: none;
  --#{$prefix}btn-border-radius: #{$btn-border-radius};
  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
  --#{$prefix}btn-hover-box-shadow: #{$btn-hover-box-shadow};
  --#{$prefix}btn-focus-box-shadow: #{$btn-focus-box-shadow};
  --#{$prefix}btn-active-box-shadow: #{$btn-active-box-shadow};
  // scss-docs-end btn-css-vars

  padding-top: var(--#{$prefix}btn-padding-top);
  padding-bottom: var(--#{$prefix}btn-padding-bottom);
  text-transform: uppercase;
  vertical-align: bottom;
  border: 0;
  @include border-radius(var(--#{$prefix}btn-border-radius));
  box-shadow: var(--#{$prefix}btn-box-shadow);

  :not(.btn-check) + &:hover,
  &:first-child:hover,
  &:focus-visible,
  &:hover {
    box-shadow: var(--#{$prefix}btn-hover-box-shadow);
  }

  .btn-check:focus-visible + &,
  .btn-check:focus + &,
  &:focus {
    box-shadow: var(--#{$prefix}btn-focus-box-shadow);
  }

  .btn-check:checked + &,
  .btn-check:active + &,
  &:active,
  &.active,
  &.show {
    box-shadow: var(--#{$prefix}btn-active-box-shadow);

    &:focus {
      box-shadow: var(--#{$prefix}btn-focus-box-shadow);
    }
  }

  &:disabled,
  &.disabled,
  fieldset:disabled & {
    box-shadow: var(--#{$prefix}btn-box-shadow);
  }
}

//
// Outline styles
//

[class*='btn-outline-'] {
  // scss-docs-start btn-outline-css-vars
  --#{$prefix}btn-padding-top: #{$btn-outline-padding-top};
  --#{$prefix}btn-padding-bottom: #{$btn-outline-padding-bottom};
  --#{$prefix}btn-padding-x: #{$btn-outline-padding-x};
  --#{$prefix}btn-border-width: #{$btn-outline-border-width};
  --#{$prefix}btn-line-height: #{$btn-line-height};
  // scss-docs-end btn-outline-css-vars

  padding: var(--#{$prefix}btn-padding-top) var(--#{$prefix}btn-padding-x)
    var(--#{$prefix}btn-padding-bottom);
  border-width: var(--#{$prefix}btn-border-width);
  border-style: solid;
  box-shadow: none;

  :not(.btn-check) + &:hover,
  &:first-child:hover,
  &:focus-visible,
  &:hover {
    box-shadow: none;
  }

  .btn-check:focus-visible + &,
  .btn-check:focus + &,
  &:focus {
    box-shadow: none;
  }

  .btn-check:checked + &,
  .btn-check:active + &,
  &:active,
  &.active,
  &.show {
    box-shadow: none;

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

  &:disabled,
  &.disabled,
  fieldset:disabled & {
    box-shadow: none;
  }

  &.btn-lg {
    @include button-outline-size(
      $btn-outline-padding-top-lg,
      $btn-outline-padding-bottom-lg,
      $btn-outline-padding-x-lg,
      $btn-outline-font-size-lg,
      $btn-outline-line-height-lg
    );
  }

  &.btn-sm {
    @include button-outline-size(
      $btn-outline-padding-top-sm,
      $btn-outline-padding-bottom-sm,
      $btn-outline-padding-x-sm,
      $btn-outline-font-size-sm,
      $btn-outline-line-height-sm
    );
  }
}

//
// Alternate buttons
//

// scss-docs-start btn-secondary
.btn-secondary {
  box-shadow: none;

  :not(.btn-check) + &:hover,
  &:first-child:hover,
  &:focus-visible,
  &:hover {
    box-shadow: none !important;
  }

  .btn-check:focus-visible + &,
  .btn-check:focus + &,
  &:focus {
    box-shadow: none;
  }

  .btn-check:checked + &,
  .btn-check:active + &,
  &:active,
  &.active,
  &.show {
    box-shadow: none;

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

  &:disabled,
  &.disabled,
  fieldset:disabled & {
    box-shadow: none;
  }
}

// scss-docs-end btn-secondary

// scss-docs-start btn-variant-loop
@each $color, $value in $buttons {
  .btn-#{$color} {
    @include button-variant(
      map-get($value, 'background-color'),
      map-get($value, 'text-color'),
      $btn-contextual-box-shadow map-get($value, 'shadow-color'),
      shade-color(map-get($value, 'background-color'), $btn-hover-bg-shade-amount),
      map-get($value, 'text-color'),
      shade-color(map-get($value, 'background-color'), $btn-focus-bg-shade-amount),
      map-get($value, 'text-color'),
      shade-color(map-get($value, 'background-color'), $btn-active-bg-shade-amount),
      map-get($value, 'text-color')
    );

    --#{$prefix}btn-box-shadow-state: #{$btn-contextual-box-shadow-state-first-part
        rgba(map-get($value, shadow-color), 0.3),
      $btn-contextual-box-shadow-state-second-part rgba(map-get($value, shadow-color), 0.2)};

    :not(.btn-check) + &:hover,
    &:first-child:hover,
    &:focus-visible,
    &:hover {
      box-shadow: var(--#{$prefix}btn-box-shadow-state);
    }

    .btn-check:focus-visible + &,
    .btn-check:focus + &,
    &:focus {
      box-shadow: var(--#{$prefix}btn-box-shadow-state);
      background-color: var(--#{$prefix}btn-focus-bg);
    }

    .btn-check:checked + &,
    .btn-check:active + &,
    &:active,
    &.active,
    &.show {
      box-shadow: var(--#{$prefix}btn-box-shadow-state);

      &:focus {
        box-shadow: var(--#{$prefix}btn-box-shadow-state);
      }

      &:hover {
        background-color: var(--#{$prefix}btn-active-bg);
      }
    }

    &:disabled,
    &.disabled,
    fieldset:disabled & {
      box-shadow: var(--#{$prefix}btn-box-shadow);
    }
  }
}

// scss-docs-end btn-variant-loop

// scss-docs-start btn-outline-variant-loop
@each $color, $value in $buttons-outline {
  .btn-outline-#{$color} {
    @include button-outline-variant(
      map-get($value, 'text-color'),
      shade-color(map-get($value, 'text-color'), $btn-hover-bg-shade-amount),
      shade-color(map-get($value, 'text-color'), $btn-focus-bg-shade-amount),
      shade-color(map-get($value, 'text-color'), $btn-active-bg-shade-amount)
    );

    --#{$prefix}btn-border-color: #{map-get($value, 'border-color')};
    --#{$prefix}btn-focus-border-color: #{shade-color(
        map-get($value, 'border-color'),
        $btn-focus-bg-shade-amount
      )};
    --#{$prefix}btn-hover-border-color: #{shade-color(
        map-get($value, 'border-color'),
        $btn-hover-bg-shade-amount
      )};

    border-color: var(--#{$prefix}btn-border-color);

    :not(.btn-check) + &:hover,
    &:first-child:hover,
    &:focus-visible,
    &:hover {
      border-color: var(--#{$prefix}btn-hover-border-color);
    }

    .btn-check:focus-visible + &,
    .btn-check:focus + &,
    &:focus {
      border-color: var(--#{$prefix}btn-focus-border-color);
    }

    .btn-check:checked + &,
    .btn-check:active + &,
    &:active,
    &.active,
    &.show {
      border-color: var(--#{$prefix}btn-active-border-color);

      &:focus {
        border-color: var(--#{$prefix}btn-focus-border-color);
      }
    }

    &:disabled,
    &.disabled,
    fieldset:disabled & {
      border-color: var(--#{$prefix}btn-border-color);
    }
  }
}

// scss-docs-end btn-outline-variant-loop

//
// Link buttons
//

// Make a button look and behave like a link
.btn-link {
  --#{$prefix}btn-font-weight: #{$font-weight-medium};
  --#{$prefix}btn-color: #{$btn-link-color};
  --#{$prefix}btn-hover-color: #{$btn-link-hover-color};
  --#{$prefix}btn-hover-bg: #{$btn-link-hover-bg};
  --#{$prefix}btn-focus-color: #{$btn-link-focus-color};
  --#{$prefix}btn-active-color: #{$btn-link-active-color};
  --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
  --#{$prefix}btn-box-shadow: none;

  text-decoration: $link-decoration;
  box-shadow: var(--#{$prefix}btn-box-shadow);

  :not(.btn-check) + &:hover,
  &:first-child:hover,
  &:focus-visible,
  &:hover {
    text-decoration: $link-hover-decoration;
    box-shadow: var(--#{$prefix}btn-box-shadow);
  }

  .btn-check:focus-visible + &,
  .btn-check:focus + &,
  &:focus {
    color: var(--#{$prefix}btn-focus-color);
    box-shadow: var(--#{$prefix}btn-box-shadow);
  }

  .btn-check:checked + &,
  .btn-check:active + &,
  &:active,
  &.active,
  &.show {
    color: var(--#{$prefix}btn-active-color);
    box-shadow: var(--#{$prefix}btn-box-shadow);

    &:focus {
      color: var(--#{$prefix}btn-focus-color);
      box-shadow: var(--#{$prefix}btn-box-shadow);
    }
  }

  &:disabled,
  &.disabled,
  fieldset:disabled & {
    box-shadow: var(--#{$prefix}btn-box-shadow);
  }
}

.btn-tertiary {
  --#{$prefix}btn-font-weight: #{$font-weight-medium};
  --#{$prefix}btn-color: #{$btn-link-color};
  --#{$prefix}btn-hover-color: #{$btn-link-hover-color};
  --#{$prefix}btn-hover-bg: transparent;
  --#{$prefix}btn-focus-color: #{$btn-link-focus-color};
  --#{$prefix}btn-active-color: #{$btn-link-active-color};
  --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
  --#{$prefix}btn-box-shadow: none;

  padding-left: 0px;
  padding-right: 0px;
  text-decoration: $link-decoration;
  box-shadow: var(--#{$prefix}btn-box-shadow);

  :not(.btn-check) + &:hover,
  &:first-child:hover,
  &:focus-visible,
  &:hover {
    text-decoration: $link-hover-decoration;
    box-shadow: var(--#{$prefix}btn-box-shadow);
  }

  .btn-check:focus-visible + &,
  .btn-check:focus + &,
  &:focus {
    color: var(--#{$prefix}btn-focus-color);
    box-shadow: var(--#{$prefix}btn-box-shadow);
  }

  .btn-check:checked + &,
  .btn-check:active + &,
  &:active,
  &.active,
  &.show {
    color: var(--#{$prefix}btn-active-color);
    box-shadow: var(--#{$prefix}btn-box-shadow);

    &:focus {
      color: var(--#{$prefix}btn-focus-color);
      box-shadow: var(--#{$prefix}btn-box-shadow);
    }
  }

  &:disabled,
  &.disabled,
  fieldset:disabled & {
    box-shadow: var(--#{$prefix}btn-box-shadow);
  }
}

//
// Button Sizes
//

.btn-lg {
  @include button-size(
    $btn-padding-top-lg,
    $btn-padding-bottom-lg,
    $btn-padding-x-lg,
    $btn-font-size-lg,
    $btn-line-height-lg
  );
}

.btn-sm {
  @include button-size(
    $btn-padding-top-sm,
    $btn-padding-bottom-sm,
    $btn-padding-x-sm,
    $btn-font-size-sm,
    $btn-line-height-sm
  );
}

//
// Rounded option
//

.btn-rounded {
  --#{$prefix}btn-border-radius: #{$btn-rounded-border-radius};

  border-radius: var(--#{$prefix}btn-border-radius);
}

//
// Floating option
//

.btn-floating,
[class*='btn-outline-'].btn-floating {
  --#{$prefix}btn-border-radius: #{$btn-floating-border-radius};

  border-radius: var(--#{$prefix}btn-border-radius);
  padding: 0;
  position: relative;
}

.btn-floating {
  --#{$prefix}btn-width: #{$btn-floating-width};
  --#{$prefix}btn-height: #{$btn-floating-height};
  --#{$prefix}btn-icon-width: #{$btn-floating-icon-width};
  --#{$prefix}btn-icon-line-height: #{$btn-floating-icon-line-height};
  --#{$prefix}btn-width-lg: #{$btn-floating-width-lg};
  --#{$prefix}btn-height-lg: #{$btn-floating-height-lg};
  --#{$prefix}btn-icon-width-lg: #{$btn-floating-icon-width-lg};
  --#{$prefix}btn-icon-line-height-lg: #{$btn-floating-icon-line-height-lg};
  --#{$prefix}btn-width-sm: #{$btn-floating-width-sm};
  --#{$prefix}btn-height-sm: #{$btn-floating-height-sm};
  --#{$prefix}btn-icon-width-sm: #{$btn-floating-icon-width-sm};
  --#{$prefix}btn-icon-line-height-sm: #{$btn-floating-icon-line-height-sm};

  width: var(--#{$prefix}btn-width);
  height: var(--#{$prefix}btn-height);

  .fas,
  .far,
  .fab {
    width: var(--#{$prefix}btn-icon-width);
    line-height: var(--#{$prefix}btn-icon-line-height);
  }

  &.btn-lg {
    width: var(--#{$prefix}btn-width-lg);
    height: var(--#{$prefix}btn-height-lg);

    .fas,
    .far,
    .fab {
      width: var(--#{$prefix}btn-icon-width-lg);
      line-height: var(--#{$prefix}btn-icon-line-height-lg);
    }
  }

  &.btn-sm {
    width: var(--#{$prefix}btn-width-sm);
    height: var(--#{$prefix}btn-height-sm);

    .fas,
    .far,
    .fab {
      width: var(--#{$prefix}btn-icon-width-sm);
      line-height: var(--#{$prefix}btn-icon-line-height-sm);
    }
  }
}

[class*='btn-outline-'].btn-floating {
  --#{$prefix}btn-icon-width: #{$btn-outline-floating-icon-width};
  --#{$prefix}btn-icon-width-lg: #{$btn-outline-floating-icon-width-lg};
  --#{$prefix}btn-icon-width-sm: #{$btn-outline-floating-icon-width-sm};
  --#{$prefix}btn-icon-line-height: #{$btn-outline-floating-icon-line-height};
  --#{$prefix}btn-icon-line-height-lg: #{$btn-outline-floating-icon-line-height-lg};
  --#{$prefix}btn-icon-line-height-sm: #{$btn-outline-floating-icon-line-height-sm};

  .fas,
  .far,
  .fab {
    width: var(--#{$prefix}btn-icon-width);
    line-height: var(--#{$prefix}btn-icon-line-height);
  }

  &.btn-lg {
    .fas,
    .far,
    .fab {
      width: var(--#{$prefix}btn-icon-width-lg);
      line-height: var(--#{$prefix}btn-icon-line-height-lg);
    }
  }

  &.btn-sm {
    .fas,
    .far,
    .fab {
      width: var(--#{$prefix}btn-icon-width-sm);
      line-height: var(--#{$prefix}btn-icon-line-height-sm);
    }
  }
}

//
// Fixed option
//

.fixed-action-btn {
  --#{$prefix}btn-right: #{$fixed-action-btn-right};
  --#{$prefix}btn-bottom: #{$fixed-action-btn-bottom};
  --#{$prefix}btn-zindex: #{$fixed-action-button-zindex};
  --#{$prefix}btn-padding-top: #{$fixed-action-btn-padding-top};
  --#{$prefix}btn-padding-bottom: #{$fixed-action-btn-padding-bottom};
  --#{$prefix}btn-padding-x: #{$fixed-action-btn-padding-x};
  --#{$prefix}btn-margin-bottom: #{$fixed-action-btn-li-margin-bottom};

  position: fixed;
  right: var(--#{$prefix}btn-right);
  bottom: var(--#{$prefix}btn-bottom);
  z-index: var(--#{$prefix}btn-zindex);
  display: flex;
  flex-flow: column-reverse nowrap;
  align-items: center;
  padding: var(--#{$prefix}btn-padding-top) var(--#{$prefix}btn-padding-x)
    var(--#{$prefix}btn-padding-bottom);
  margin-bottom: 0;
  height: auto;
  overflow: hidden;

  & > .btn-floating {
    position: relative;
    transform: scale(1.2);
    z-index: 10;
  }

  ul {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    margin-bottom: 0;
    text-align: center;
    opacity: 0;
    transition: transform 0.4s, opacity 0.4s;
    z-index: -1;

    li {
      z-index: 0;
      display: flex;
      margin-right: auto;
      margin-bottom: var(--#{$prefix}btn-margin-bottom);
      margin-left: auto;

      &:first-of-type {
        margin-top: calc(var(--#{$prefix}btn-margin-bottom) * 0.5);
      }
    }

    a {
      &.btn {
        opacity: 0;
        transition: opacity 0.4s ease-in;

        &.shown {
          opacity: 1;
        }
      }
    }
  }

  &.active ul {
    opacity: 1;
  }
}

//
// Button block
//

.btn-block {
  --#{$prefix}btn-margin-top: #{$btn-block-margin-top};

  display: block;
  width: 100%;

  // Vertically space out multiple block buttons
  + .btn-block {
    margin-top: var(--#{$prefix}btn-margin-top);
  }
}