@import "../var/colors";
@import "../var/options";
@import "../var/component/sign";

@import "../fn/utils";

$sign-shadow: 0 15px 20px -5px !default;

.sign {
  display: block;
  padding: $sign-padding-y $sign-padding-x;

  @if $enable-border-radius {
    border-radius: $sign-border-radius;
  }

  @each $accent, $color in $color-map {
    &.sign-#{$accent} {
      @if $enable-shadows {
        box-shadow: $sign-shadow rgba(darken($color, 25%), .25);
      }

      background-color: resolve-var($color, color-#{$accent});
      color: text-color($color);
    }
  }
}