@use 'sass:map';

@import "variables";
@import "theme-dark";

$include-column-box-sizing: true !default;

$min-contrast-ratio: 2.5;

$custom-colors: (
        "blue": $blue,
        "pink": $pink,
        "default": $gray-600
);

$theme-colors: map-merge($theme-colors, $custom-colors);

@each $color, $value in $theme-colors {
    .bg-light-#{$color}-border {
        background-color: rgba($value, 0.05);
        border: 1px solid $value;
    }
    
    html.dark {
        .border-execution-#{$color} {
            border-left: 0.8125rem;
            border-color: $value;

        }

        .stroke-#{$color} {
            stroke: $value;
        }
    }
}

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

        .bg-#{$color} {
            background-color: $value;
        }
    }
}