@use "sass:color";
@use "../base";
@use "../colors";
@use "../functions" as *;

// NoticeBox
$background-color: hsl(36.9, 37.9%, 57.1%) !default;
$color-stripes: rgba(0, 0, 0, 0.1) !default;
$color-border: hsl(0, 0%, 15.3%) !default;
$bg-map: colors.$bg-map !default;

.NoticeBox {
  // Adapt text color to background luminance to ensure high contast
  $luminance: luminance($background-color);
  $text-color: if($luminance > 0.35, rgba(0, 0, 0, 1), rgba(255, 255, 255, 1));

  padding: 0.33em 0.5em;
  margin-bottom: 0.5em;
  box-shadow: none;
  font-weight: bold;
  font-style: italic;
  color: $text-color;
  background-color: $background-color;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent base.em(10px),
    $color-stripes base.em(10px),
    $color-stripes base.em(20px)
  );
}

@mixin box-color($color) {
  $luminance: luminance($color);
  $text-color: if($luminance > 0.35, rgba(0, 0, 0, 1), rgba(255, 255, 255, 1));
  color: $text-color;
  background-color: color.adjust($color, $saturation: -15%, $lightness: -15%);
}

@each $color-name, $color-value in $bg-map {
  .NoticeBox--color--#{$color-name} {
    @include box-color($color-value);
  }
}

.NoticeBox--type--info {
  @include box-color(colors.$blue);
}

.NoticeBox--type--success {
  @include box-color(colors.$green);
}

.NoticeBox--type--warning {
  @include box-color(colors.$orange);
}

.NoticeBox--type--danger {
  @include box-color(colors.$red);
}