.btn-default:hover {
  background: rgba(0, 0, 0, 0.05);
}

.btn {
  position: relative; // needed for badges in buttons
}

// https://codepen.io/lekoalabe/pen/JjWExoN
.btn-flex {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  flex-wrap: wrap;

  >* {
    margin-right: 0.5ch;
  }

  // This class helps to move the icon visually even when placed first in html
  &.btn-icon-end {
    l-i {
      order: 1;
      margin-left: 0.5ch;
      margin-right: 0;
    }
  }
}

// https://www.w3.org/WAI/WCAG21/Understanding/target-size.html
.btn-square {
  height: 44px;
  width: 44px;

  >* {
    margin-right: 0;
  }
}

// Align badges
.btn .badge {
  vertical-align: text-top;
}

// Badge indicator
.btn-indicator {
  --size: 16px;

  box-shadow: 0 0.1rem 0.2rem rgb(0 0 0 / 5%);
  color: #fff;
  display: block;
  font-size: 12px;
  height: var(--size);
  min-width: var(--size);
  line-height: var(--size);
  padding: 0px 4px;
  position: absolute;
  right: calc(var(--size) / -2.5);
  top: calc(var(--size) / -2.5);
  text-align: center;
  transition: top 0.1s ease-out;
  border-radius: var(--size);
  z-index: 2;

  // Use with tooltip
  &.btn-indicator-mini {
    --size: 12px;
    font-size: 8px;
  }
}

@include media-breakpoint-down(md) {
  .btn-mobile-collapse>span {
    display: none;
  }
}

.bg-dark {
  .btn-default {
    color: rgba(255, 255, 255, 0.5);

    &:hover {
      background: rgba(255, 255, 255, 0.1);
    }
  }
}

@if $enable-dark-mode {
  @include color-mode(dark) {
    .btn-default {
      color: rgba(255, 255, 255, 0.5);

      &:hover {
        background: rgba(255, 255, 255, 0.1);
      }
    }
  }
}