AugurProject/augur-ui

@import (reference) '~assets/styles/shared';

.GlobalCutoffBanner {
  align-items: center;
  background: @color-cuttoff-red;
  color: black;
  display: flex;
  font-size: @font-size-normal;
  height: @global-banner-height;
  left: 0;
  line-height: 21px;
  padding: 0 1.5rem 0 1rem;
  position: absolute;
  right: 0;
  z-index: 10;

  > div:first-of-type {
    align-items: center;
    display: flex;

    > svg > path:last-of-type {
      fill: black;
    }
  }

  > div:last-of-type {
    align-items: center;
    display: flex;
    flex: 1;

    > span {
      margin-left: 1rem;
    }

    > a {
      align-items: center;
      display: flex;
      flex: 1;
      font-weight: bold;
      justify-content: flex-end;
      text-decoration: underline;
      white-space: nowrap;
    }
  }

  @media @breakpoint-mobile {
    font-size: @font-size-small;
    height: @global-banner-height-mobile;
    left: 0;
    line-height: 1rem;
    padding: 1rem 0.75rem;

    > div:first-of-type {
      align-items: flex-start;
    }

    > div:last-of-type {
      display: block;
      margin-left: 1rem;

      > span {
        margin-left: 0;
        margin-right: 0;
      }

      > a {
        display: inline;
        margin-left: 0.2rem;
      }
    }
  }

  @media @breakpoint-mobile-small {
    height: @global-banner-height-mobile-small;
  }
}