.form-control,
.form-select {
  --bs-body-bg: #ffffff;
}

.w-md-auto {
  width: 100% !important;
  @include media-breakpoint-up(md) {
    width: auto !important;
  }
}

.scroll-container {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: thin;
  scrollbar-color: rgba($azul, 0.75) $white;
}

.nav.nav-tabs {
  border-bottom: 0cap;
  gap: 1rem;
}

.nav-tabs.style-box {
  .nav-item .nav-link {
    @extend .box;
    @extend .py-2;
    @extend .text-black;
    margin: 0 !important;
    border: 0;

    &.active {
      @extend .text-primary;
      border: 0;
    }

    &.disabled {
      @extend .text-muted;
      cursor: not-allowed;
    }
  }
}

/* HTML: <div class="loader"></div> */
.loader {
  margin-top: 100px;
  height: 20px;
  aspect-ratio: 5;
  -webkit-mask: linear-gradient(90deg, #0000, $azul 20% 80%, #0000);
  background: radial-gradient(closest-side at 37.5% 50%, $azul 94%, #0000) 0 /
    calc(80% / 3) 100%;
  animation: l48 0.75s infinite linear;
}
@keyframes l48 {
  100% {
    background-position: 36.36%;
  }
}

hr {
  @extend .text-muted;
}

.content-dashboard {
  ::-webkit-scrollbar {
    width: 12px;
  }

  ::-webkit-scrollbar-track {
    background: red;
  }

  ::-webkit-scrollbar-thumb {
    background-color: $primary;
    border-radius: 10px;
    border: 3px solid red;
  }

  @include color-mode(dark) {
    ::-webkit-scrollbar-track {
      background: blue;
    }

    ::-webkit-scrollbar-thumb {
      background-color: $primary;
      border: 3px solid blue;
    }
  }
}
