// Button
// Modify bootstrap's button components
//

// stylelint-disable selector-no-qualifying-type
// stylelint-disable declaration-no-important

.btn {
  i {
    margin: 0 .35rem;
    transition-delay: calc($transition-duration / 2);
  }
  i,
  span {
    position: relative;
    display: inline-block;
    transition: transform $transition-duration;
  }
  &:hover {
    span {
      transform: translateX(.2rem);
    }
    span i {
      transform: translateX(.2rem);
    }
  }
}

.btn-emphasis {
  --#{$prefix}btn-color: var(--#{$prefix}emphasis-color-inverse);
  --#{$prefix}btn-bg: var(--#{$prefix}emphasis-bg-inverse);
  --#{$prefix}btn-border-color: var(--#{$prefix}emphasis-bg-inverse);
  --#{$prefix}btn-hover-color: var(--#{$prefix}primary-contrast);
  --#{$prefix}btn-hover-bg: var(--#{$prefix}primary);
  --#{$prefix}btn-hover-border-color: var(--#{$prefix}primary);
  --#{$prefix}btn-focus-shadow-rgb: var(--#{$prefix}body-color-rgb);
  --#{$prefix}btn-active-color: var(--#{$prefix}primary-contrast);
  --#{$prefix}btn-active-bg: var(--#{$prefix}primary);
  --#{$prefix}btn-active-border-color: var(--#{$prefix}primary);
  // --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  // --#{$prefix}btn-disabled-color: #{$disabled-color};
  // --#{$prefix}btn-disabled-bg: #{$disabled-background};
  // --#{$prefix}btn-disabled-border-color: #{$disabled-border};
}

// %buttons-style {
//   --#{$prefix}btn-hover-color: var(--lx-ornament-color);
//   --#{$prefix}btn-hover-bg: var(--lx-ornament-border-color);
//   --#{$prefix}btn-active-color: var(--lx-ornament-color);
//   --#{$prefix}btn-active-bg-color: var(--lx-ornament-border-color);

//   transition: color .25s, background-color .25s, border-color $transition-duration;
//   transition-delay: 0s, calc($transition-duration / 2), calc($transition-duration / 2);
// }

.btn-hover-outline-primary {
  --#{$prefix}btn-hover-color: var(--lx-ornament-border-color);
  --#{$prefix}btn-hover-bg: transparent;
  --#{$prefix}btn-active-color: var(--lx-ornament-border-color);
  --#{$prefix}btn-active-bg: transparent;

  position: relative;
  white-space: nowrap;
  transition-delay: $transition-duration;

  &::before,
  &::after {
    position: absolute;
    bottom: calc(-1 * var(--lx-ornament-border-width));
    left: calc(-1 * var(--lx-ornament-border-width));
    box-sizing: border-box;
    width: 0;
    height: 0;
    pointer-events: none;
    content: "";
    border: 0 solid var(--lx-ornament-border-color);
    transition: border-color 0s, width $transition-duration, height $transition-duration;
  }

  &::before {
    border-right-width: var(--lx-ornament-border-width);
    border-bottom-width: var(--lx-ornament-border-width);
    transition-delay: 0s, $transition-duration, 0s;
  }

  &::after {
    border-top-width: var(--lx-ornament-border-width);
    border-left-width: var(--lx-ornament-border-width);
    transition-delay: 0s, 0s, $transition-duration;
  }

  &:hover,
  .btn-check + &:hover,
  .btn-check:checked + &:not(.btn-link),
  &:focus-visible,
  .btn-check:focus-visible + &,
  &.dropdown-toggle.show {
    transition-delay: 0s;

    &::before,
    &::after {
      width: calc(100% + (2 * var(--lx-ornament-border-width)));
      height: calc(100% + (2 * var(--lx-ornament-border-width)));
    }

    &::before {
      transition-delay: 0s, 0s, $transition-duration;
    }

    &::after {
      transition-delay: 0s, $transition-duration, 0s;
    }
  }

  &:hover,
  &.btn-link:hover,
  .btn-check + &:hover:not(.btn-link),
  .btn-check + &:hover + .btn-check + .btn,
  // .btn-check + &:checked + .btn-check + .btn,
  &:focus-visible,
  .btn-check:focus-visible + &,
  .btn-check:focus-visible + & + .btn-check + .btn,
  .btn-select-dropdown:hover &,
  .btn-range:hover &,
  &.dropdown-toggle.show,
  // .btn-check:checked + &,
  .btn-check:checked + &:hover {
    padding-right: calc(var(--#{$prefix}btn-padding-x));
    padding-left: calc(var(--#{$prefix}btn-padding-x));
  }

  .btn-check:checked + &,
  :not(.btn-check) + &:active,
  &:first-child:active,
  &.active,
  &.show,
  &[data-bs-toggle="collapse"]:not(.collapsed) {
    border-bottom-color: var(--#{$prefix}btn-active-color);
  }

  &.btn-link {
    border-bottom: var(--#{$prefix}secondary) var(--#{$prefix}btn-border-width) solid;
    &,
    &:disabled,
    &.disabled,
    fieldset:disabled & {
      padding-right: calc(var(--#{$prefix}btn-padding-x) * 2);
      padding-left: 0;
      text-align: left;
      border-top-color: transparent;
      border-right-color: transparent;
      border-left-color: transparent;
    }
  }

  .btn-check:checked + &:not(.btn-link),
  :not(.btn-check) + &:active:not(.btn-link),
  &:first-child:active:not(.btn-link),
  &.active:not(.btn-link),
  &.show:not(.btn-link) {
    color: $primary-contrast;
    background-color: $primary;
  }

  span.btn-check-icon {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }

  .btn-check-icon,
  &:hover + .btn-check + .btn .btn-check-icon,
  &:hover + .btn-check:checked + .btn .btn-check-icon {
    opacity: 0;
    transition: all $transition-duration;
  }

  .btn-check:checked + &:not(:hover) .btn-check-icon {
    opacity: 1;
    transition-delay: calc($transition-duration * 2);
  }

}

.btn-counter {
  input {
    width: 110px;
  }
}

.btn[data-bs-toggle="collapse"] {

  .collapsed-block {
    display: none;
  }

  &.collapsed {
    .collapsed-block {
      display: block;
    }
    .collapsed-none {
      display: none;
    }
  }
}