@mixin lighten-color($perc, $color, $type) {
  $percentage: $perc*1%;

  #{$type}: lighten($color, $percentage);
}

@mixin darken-color($perc, $color, $type) {
  $percentage: $perc*1%;

  #{$type}: darken($color, $percentage);
}

@mixin mix-darken-color($perc, $color, $type) {
  $percentage: $perc*1%;

  #{$type}: mix(black, $color, $percentage);
}

@mixin mix-lighten-color($perc, $color, $type) {
  $percentage: $perc*1%;

  #{$type}: mix(white, $color, $percentage);
}

@mixin checkbox-and-radio-buttons() {
  .smart-radio-button {
    .smart-label {
      margin-bottom: 0;
    }

    .smart-overlay {
      width: 24px;
      height: 24px;
      top: 7px;
      left: 5px;
    }

    &.smart-toggle-box {
      .smart-input:after {
        width: 45%;
        height: 45%;
      }
    }
  }

  .smart-check-box {
    .smart-label {
      margin-bottom: 0;
    }

    .smart-overlay {
      width: 24px;
      height: 24px;
      top: 7px;
      left: 5px;
      border-radius: 0.45rem;
    }

    &.smart-toggle-box[checked] {
      .smart-input {
        &:after {
          content: '';
          background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
          background-repeat: no-repeat;
          background-position: center center;
        }
      }
    }
  }
}

@mixin background-opacity($color, $opacity) {
  background: $color; /*Fallback */
  background: rgba($color, $opacity);
}

@mixin box-shadow-opacity($color, $opacity) {
  box-shadow: 0 0 0 0.25rem $color; /*Fallback */
  box-shadow: 0 0 0 0.25rem rgba($color, $opacity);
}

@function hexToRGB($hex) {
  @return red($hex), green($hex), blue($hex);
}

$main-colors-list: primary secondary success error info warning light dark;
$theme-colors: ();
$theme-colors: map-merge(
                (
                        "primary": $primary,
                        "secondary": $secondary,
                        "success": $success,
                        "info": $info,
                        "warning": $warning,
                        "error": $danger,
                        "light": $light,
                        "dark": $dark
                ),
                $theme-colors
);

@function contrast-color($bg-color, $dark, $light) {
  $threshold: 20%;

  @return if(lightness($bg-color) < $threshold, $light, $dark)
}