:root {
@mixin custom-color-variables($color-name: 'primary',$color-value: $primary) {
--#{$variable-prefix}heading-color: #{shade-color($color-value, 80%)};
--#{$variable-prefix}#{$color-name}: #{$color-value};
--#{$variable-prefix}#{$color-name}-shade-80: #{shade-color($color-value, 80%)};
--#{$variable-prefix}#{$color-name}-shade-60: #{shade-color($color-value, 60%)};
--#{$variable-prefix}#{$color-name}-shade-40: #{shade-color($color-value, 40%)};
--#{$variable-prefix}#{$color-name}-shade-20: #{shade-color($color-value, 20%)};
--#{$variable-prefix}#{$color-name}-tint-80: #{tint-color($color-value, 80%)};
--#{$variable-prefix}#{$color-name}-tint-60: #{tint-color($color-value, 60%)};
--#{$variable-prefix}#{$color-name}-tint-40: #{tint-color($color-value, 40%)};
--#{$variable-prefix}#{$color-name}-tint-20: #{tint-color($color-value, 20%)};
--#{$variable-prefix}#{$color-name}-rgb: #{to-rgb($color-value)};
--#{$variable-prefix}#{$color-name}-tint-88: #{tint-color($color-value, 88%)};
}
@include custom-color-variables('primary',$primary);
@each $color, $value in $custom-colors {
.#{$color} {
@each $name, $hax-value in $value {
@include custom-color-variables($name, $hax-value);
}
}
}
}
@each $color, $value in $custom-colors {
.#{$color} {
.form-check-input {
&:checked {
&[type="checkbox"] {
background-color: #{$color};
// background-image: escape-svg( url("data:image/svg+xml,"))
}
&[type="radio"] {
// background-image: escape-svg( url("data:image/svg+xml,"))
}
}
}
.form-switch {
.form-check-input {
padding: $form-switch-size;
background-color: $gray-200;
border-color: $gray-200;
transition: all 300ms ease;
&:checked {
// background-image: escape-svg( url("data:image/svg+xml,"));
background-color: var(--bs-primary-tint-80);
border-color: var(--bs-primary-tint-80);
transition: all 300ms ease;
}
}
}
.accordion-button{
&:not(.collapsed) {
&::after {
// background-image: escape-svg(url("data:image/svg+xml,"));
}
}
}
}
}