@mixin _message($bg-color) {
  color: get-contrast($bg-color);
  @include gradient-bg($bg-color);
}

.message {
  @include _message($message-default-bg-color); // default color
  // common attributes.
  z-index: $z-index-message;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: $message-padding-y $message-padding-x;
  margin: $message-margin;
  @include border-radius($message-border-radius);

  .close-button {
    font-size: 1.35rem;

    // scss-lint:disable SelectorDepth
    svg path {
      stroke-width: 2px;
    }
  }

  // each color-set
  @each $name, $color in $color-set {
    &.#{$name} {
      @include _message($color);
    }
  }
}

// effects.
@include vue-fade('message-fade', '.5s', '.5s');