$colors: (
    primary: #0b0b0b,
    dark_primary:#1f1d1d,
    secondary:#c8102e,
    white: #FFFFFF,
    black: #000000,
    gray:#acacac,
    light_gray:#e3e3e3,
    dark_gray:#d6d6d6,
) !default;


@function customColor($color) {
    @return map-get($colors, $color);
}

@each $name, $color in $colors {
    .custom-bg-#{$name} {
      background-color: $color;
    }
    .custom-color-#{$name} {
      color: $color;
    }
}

@each $name, $color in $colors {
    .button-#{$name} {
      background-color: $color;
    }
    .button-text-#{$name} {
      color: $color;
    }
    .button-border-#{$name} {
      border:1px solid $color;
    }
  }