/*
 * --gl-broadcast-message-padding-x
 *
 * Way to hook into spacing of gl-alert.
 * This is used e.g. for page wide containers
 * in GitLab.
 */
// stylelint-disable length-zero-no-unit
$gl-broadcast-message-padding-x: var(--gl-broadcast-message-padding-x, 0px);

.gl-broadcast-message {
  @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;
  padding-left: calc(#{$gl-spacing-scale-5} + #{$gl-broadcast-message-padding-x});
  padding-right: calc(#{$gl-spacing-scale-4} + #{$gl-broadcast-message-padding-x});
  @include gl-py-5;

  &.indigo {
    --gl-broadcast-message-bg-color: #{$theme-indigo-700};
    --gl-broadcast-message-border-color: #{$theme-indigo-900};
  }

  &.light-indigo {
    --gl-broadcast-message-bg-color: #{$theme-indigo-500};
    --gl-broadcast-message-border-color: #{$theme-indigo-700};
  }

  &.blue {
    --gl-broadcast-message-bg-color: #{$theme-blue-700};
    --gl-broadcast-message-border-color: #{$theme-blue-900};
  }

  &.light-blue {
    --gl-broadcast-message-bg-color: #{$theme-blue-500};
    --gl-broadcast-message-border-color: #{$theme-blue-700};
  }

  &.green {
    --gl-broadcast-message-bg-color: #{$theme-green-700};
    --gl-broadcast-message-border-color: #{$theme-green-900};
  }

  &.light-green {
    --gl-broadcast-message-bg-color: #{$theme-green-500};
    --gl-broadcast-message-border-color: #{$theme-green-700};
  }

  &.red {
    --gl-broadcast-message-bg-color: #{$theme-red-700};
    --gl-broadcast-message-border-color: #{$theme-red-900};
  }

  &.light-red {
    --gl-broadcast-message-bg-color: #{$theme-red-500};
    --gl-broadcast-message-border-color: #{$theme-red-700};
  }

  &.dark {
    --gl-broadcast-message-bg-color: #{$gray-500};
    --gl-broadcast-message-border-color: #{$gray-700};
  }

  &.light {
    --gl-broadcast-message-bg-color: #{$gray-50};
    --gl-broadcast-message-border-color: #{$gray-100};
  }

  &.banner {
    @include gl-text-contrast-light;
    background-color: var(--gl-broadcast-message-bg-color);
    box-shadow: inset 0 -#{$gl-border-size-1} 0 0 var(--gl-broadcast-message-border-color);

    &.light {
      @include gl-text-black-normal;
    }
  }

  &.notification {
    @include gl-rounded-base;
    @include gl-bg-white;
    @include gl-border;
    @include gl-shadow-x0-y2-b4-s0;
    max-width: $gl-broadcast-message-notification-max-width;
  }

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

  &-icon {
    @include gl-mr-5;
    line-height: $gl-line-height-16;

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

  &-text {
    margin-top: -$gl-spacing-scale-1;
    margin-bottom: -$gl-spacing-scale-1;
    @include gl-overflow-anywhere;
  }

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