Notification Bar

.notification-bar {
  background: $accent;
  bottom: 0;
  box-shadow: 0 -1px 5px 0 rgba(0,0,0,0.75);
  color: $white;
  left: 0;
  margin: 0;
  padding: $space-lg;
  position: fixed;
  transition: all 0.3s ease-in-out;
  width: 100%;
  z-index: 2147483647;

  &--close {
    left: -100%;
    opacity: 0;
  }

  a {
    color: $white;
    cursor: pointer;
    font-weight: $font-weight-bold;
  }

  &__content {
    display: flex;
    flex-direction: column;
  }

  &__cta a {
    display: flex;
    color: $white;
    font-weight: $font-weight-bold;

    &:hover {
      text-decoration: underline;
    }
  }

  &__cta_icon {
    fill: $white;
    width: 1rem;
    height: 1rem;
    margin-right: 0.2rem;
  }
}

.language-notification-bar {
  position: fixed;
  width: 100%;
  z-index: 3000;

  .close {
    position: relative;

    & > span {
      cursor: pointer;
      position: absolute;
    }
  }

  p {
    line-height: 1;
    margin-bottom: 0;
  }

  .icon {
    height: 15px;
    margin-right: $space-md;
    width: 15px;

    @include mq($breakpoint-lg) {
      height: 20px;
      width: 20px;
    }
  }

  &.global {
    background-color: rgba(255,255,255,0.9);
    color: $primary;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    max-width: $breakpoint-xxl;
    right: 0;
    top: 60vw;
    text-align: center;
    width: calc(100% - 2rem);

    .icon {
      display: inline-block;
      fill: $primary;
      vertical-align: middle;
    }

    .msg {
      vertical-align: middle;
      word-break: keep-all;
    }

    .close > span {
      right: 0;
      top: $space-md;
    }

    .notification-bar__body {
      padding: 15vw;
    }

    @include mq($breakpoint-lg) {
      top: 20vw;

      .notification-bar__body {
        padding: 5vw;
      }

      .close > span {
        right: $space-md;
        top: $space-xl;
      }
    }
  }

  &.node {
    background-color: $primary;
    color: $white;
    padding: $space-md;
    top: 85px;
    z-index: 2990;

    @include mq($breakpoint-lg) {
      padding: $space-md 5vw;
      top: 166px;
    }

    &.sticky {
      display: none;
    }

    &.with--submenu {
      top: 131.33px;

      @include mq($breakpoint-lg) {
        top: 228px;
      }
    }

    .icon {
      fill: $white;

      @include mq-only($breakpoint-mob) {
        margin-right: $space-xs;
      }
    }

    .msg {
      vertical-align: bottom;
      word-break: keep-all;
    }

    .close > span {
      right: 0;

      .icon {
        margin-right: 0;
      }
    }

    .notification-bar__body {
      padding: 0 1.5rem 0 0;

      @include mq($breakpoint-lg) {
        padding: 0 5vw;
      }
    }

    @include mq($breakpoint-lg) {
      .close > span .icon {
        margin-right: $space-md;
      }

      .notification-bar__body {
        padding: 0;
      }
    }
  }
}

.language-notification-overlay {
  background-color: rgba(0,0,0,0.5);
  bottom: 0;
  left: 0;
  height: 100%;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 2147483648;
}

body.overlay--opened {
  overflow: hidden;
}