/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */

.env-banner {
  align-self: center;
  border-radius: $size-1;
  background: linear-gradient(
    135deg,
    $blue,
    hsl(271, 100%, 71%)
  ); // only use case for purple in the app. define here instead of utils/color_var
  animation: env-banner-color-rotate 8s infinite linear alternate;
  color: $white;
  margin-top: -20px;
  margin-bottom: 6px;

  .hs-icon {
    margin: 0;
  }

  .notification {
    background-color: transparent;
    line-height: 1.66;
    padding: 0 $spacing-s;
  }
}

@keyframes env-banner-color-rotate {
  100% {
    filter: hue-rotate(105deg);
  }
}