.pix-banner-alert {
  display: flex;
  gap: var(--pix-spacing-2x);
  align-items: center;
  padding: var(--pix-spacing-4x) var(--pix-spacing-6x);
  font-size: 0.875rem;
  border-bottom: 1px solid currentcolor;

  &__icon {
    flex-shrink: 0;
  }

  &__action {
    display: inline-flex;
    align-items: center;
    color: inherit;
    text-decoration: underline;

    .external-link {
      width: 1rem;
      height: 1rem;
      margin-left: var(--pix-spacing-1x);
    }
  }

  &__close {
    display: flex;
    margin-left: auto;
  }

  &--information {
    color: var(--pix-info-700);
    background-color: var(--pix-info-50);

    .pix-icon-button {
      color: currentcolor;
      background-color: var(--pix-info-50);

      &:hover:enabled,
      &:focus:enabled,
      &:active:enabled {
        background-color: var(--pix-info-100);
      }

      &:focus:enabled {
        outline-color: var(--pix-primary-700);
      }
    }
  }

  &--warning {
    color: var(--pix-warning-700);
    background-color: var(--pix-warning-50);

    .pix-icon-button {
      color: currentcolor;
      background-color: var(--pix-warning-50);

      &:hover:enabled,
      &:focus:enabled,
      &:active:enabled {
        background-color: var(--pix-warning-100);
      }

      &:focus:enabled {
        outline-color: var(--pix-warning-700);
      }
    }
  }

  &--error {
    color: var(--pix-error-700);
    background-color: var(--pix-error-50);

    .pix-icon-button {
      color: currentcolor;
      background-color: var(--pix-error-50);

      &:hover:enabled,
      &:focus:enabled,
      &:active:enabled {
        background-color: var(--pix-error-100);
      }

      &:focus:enabled {
        outline-color: var(--pix-error-700);
      }
    }
  }

  &--environment {
    color: var(--pix-primary-700);
    background-color: var(--pix-primary-10);

    .pix-icon-button {
      color: currentcolor;
      background-color: var(--pix-primary-10);

      &:hover:enabled,
      &:focus:enabled,
      &:active:enabled {
        background-color: var(--pix-primary-100);
      }

      &:focus:enabled {
        outline-color: var(--pix-primary-700);
      }
    }
  }
}