@use '../bootstrap/init' as *;
@use '../atoms/mixins/buttons' as mixins-buttons;

@each $color, $value in $theme-colors {
  @include bg-variant('.bg-#{$color}', $value);
}

@each $color, $value in $theme-colors {
  .border-#{$color} {
    border-color: $value !important;
  }
}

@each $color, $value in $theme-colors {
  @include text-emphasis-variant('.text-#{$color}', $value, true);
}

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @include button-variant($value, $value);
    @include mixins-buttons.button-svg-icon-variant($value, $value);
    box-shadow: none !important;
  }
}

@each $color, $value in $theme-colors {
  .btn-outline-#{$color} {
    @include button-outline-variant($value, $color-hover: $value, $active-background: rgba($value, 0.1), $active-border: $value);
    @include mixins-buttons.button-outline-svg-icon-variant($value, $color-hover: $value);

    &:not(:disabled):not(.disabled):active,
    &:not(:disabled):not(.disabled).active {
      color: $value;
      background-color: rgba($value, 0.1);
      border-color: $value;
    }

    box-shadow: none !important;
  }

  // separate style: https://github.com/weseek/growi/pull/6804
  .show > .btn-outline-#{$color}.dropdown-toggle {
    color: $value;
    background-color: rgba($value, 0.1);
    border-color: $value;
  }
}

@each $theme-color, $color in $theme-colors {
  .custom-checkbox-#{$theme-color} {
    .custom-control-label::before {
      border-color: $input-border-color;
      transition: 0.3s ease-in-out;
    }
    .custom-control-input:checked + .custom-control-label::before {
      background-color: $color;
      border-color: $color;
    }
    .custom-control-input:checked + .custom-control-label::after {
      color: $bgcolor-global;
    }
    .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
      color: $bgcolor-global;
      background-color: $color;
      border-color: $color;
    }
    .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
      color: $bgcolor-global;
      background-color: $bgcolor-global;
      border-color: $input-focus-border-color;
    }
  }
}

@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(
      theme-color-level($color, $alert-bg-level),
      theme-color-level($color, $alert-border-level),
      theme-color-level($color, $alert-color-level)
    );
  }
}

@each $color, $value in $theme-colors {
  .badge-#{$color} {
    @include badge-variant($value);
  }
  a.badge-#{$color} {
    @include badge-variant($value);
  }
}
