@use "sass:color";

$default-icon-color: var(--bs-primary) !default;


body,
html {
  min-height: 100%;
}

body {
  font-family: $font-family-base;
  color: var(--bs-body-color);
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

ul {
  padding-left: 0;
  list-style: none;
}

a:not(.alert-link) {
  text-decoration: none;
  transition: 0.25s ease-out;

  .material-icons {
    transition: 0.25s ease-out;
  }
}

label .color,
.variant-links .color,
.custom-checkbox input[type="checkbox"] + span.color {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.3125rem;
  margin-right: 0.5rem;
  margin-left: 0;
  cursor: pointer;
  background-size: contain;
  border: 1px solid $input-border-color;
  border-radius: 4px;
  transition: 0.25s ease-out;

  &.color-sm {
    width: 1rem;
    height: 1rem;
  }

  &.active,
  &:hover {
    border: 2px solid $primary;
  }
}

.input-color {
  display: none;
}

.bright {
  color: var(--bs-gray-100);
}

.dark {
  color: var(--bs-gray-800);
}