.gl-broadcast-message {
  @include gl-text-white;
  @include gl-display-flex;
  @include gl-justify-content-space-between;
  @include gl-align-items-flex-start;
  @include gl-font-base;
  @include gl-line-height-20;
  @include gl-pl-5;
  @include gl-pr-4;
  @include gl-py-5;
  @include gl-inset-border-b-1-gray-900;
  @include gl-bg-theme-indigo-700;

  &.light-indigo {
    @include gl-bg-theme-indigo-500;
  }

  &.blue {
    @include gl-bg-theme-blue-700;
  }

  &.light-blue {
    @include gl-bg-theme-blue-500;
  }

  &.green {
    @include gl-bg-theme-green-700;
  }

  &.light-green {
    @include gl-bg-theme-green-500;
  }

  &.red {
    @include gl-bg-theme-red-700;
  }

  &.light-red {
    @include gl-bg-theme-red-500;
  }

  &.dark {
    @include gl-bg-gray-500;
  }

  &.light {
    @include gl-bg-gray-300;
  }

  &-content {
    @include gl-display-flex;
    @include gl-justify-content-center;
  }

  &-text {
    max-width: $gl-broadcast-message-text-max-width;
  }

  &-icon {
    @include gl-mr-5;

    > svg {
      @include gl-vertical-align-bottom;
    }
  }

  &-dismiss {
    @include gl-my-n2;
    @include gl-ml-5;
  }
}