@use "../globals/" as *;
@use "functions" as *;

//text & bg colors in theme palllete
@each $key, $val in $theme-colors {
  .text-#{$key} {
    color: $val !important;
  }
  a.text-#{$key} {
    &:hover {
      color: darken($val, 10%) !important;
    }
  }
  .text-hover-#{$key} {
    &:hover {
      color: darken($val, 5%) !important;
    }
  }
  .b-c-#{$key} {
    border-color: $val !important;
  }
  .bg-#{$key} {
    background-color: $val !important;
    color: set-color($val);
  }
  //     @if ($val == white) {
  //   // dark variations for black
  //   @for $i from 1 through 9 {
  //     .text-#{$key}-#{$i} {
  //       color: mix(black, $val, $i * 10);
  //       }
  //       .text-hover-#{$key} {
  //           &:hover {
  //           color: darken($val, 5%);
  //           }
  //       }
  //      .bg-#{$key}-#{$i} {
  //       background-color: mix(black, $val, $i * 10);
  //     }
  //   }
  // }
}

.text-core {
  color: var(--bg-core-primary-darken);
}

.bg-core {
  background-color: var(--bg-core-primary);
}

.b-c-core {
  border-color: var(--bg-core-primary) !important;
}

.element-fg-core {
  background-color: var(--element-fg-core);
}

//change --bg-core-primary for dark
.dark {
  $val: hsl(216 100% 70%);

  .text-core {
    color: var(--text-core-hc);
  }
  a.text-core {
    color: $val !important;
    &:hover {
      color: darken($val, 10%) !important;
    }
  }

  .btn-core {
    background-color: $val !important;
    color: set-color($val) !important;
    border: 1px solid transparent;
    &:hover {
      background-color: darken($val, 10) !important;
    }
    &:focus-visible,
    &.focus {
      outline: 0;
      box-shadow: 0 0 0 0.15rem lighten($val, 20) !important;
    }
    &:active,
    &.active {
      background-color: darken($val, 15) !important;
    }
  }

  .btn-outline-core {
    color: $val !important;
    background-color: transparent;
    border: 1px solid $val !important;
    &:hover {
      color: darken($val, 10) !important;
      border: 1px solid darken($val, 10) !important;
    }
    &:focus-visible,
    &.focus {
      outline: 0 !important;
      box-shadow: 0 0 0 0.15rem lighten($val, 20) !important;
    }
    &:active,
    &.active {
      background-color: darken($val, 15) !important;
      color: set-color($val) !important;
      border: 1px solid transparent !important;
    }
  }
}
