// Header
es-portal-header {
  @include desktop {
    box-shadow: none;
    position: relative;
  }
  height: 65px;
  display: block;
  background-color: $white;
  width: 100%;
  top: 0;
  overflow: hidden;
  z-index: 97;
  position: fixed;
  padding-right: $gap;
  &.login {
    padding-right: 0;
  }
}

#scroll-container es-portal-header {
  box-shadow: 0 0 0 1px $grey-lighter;
}

header {
  margin: 0 !important;
  padding: 0;
  height: 100%;
  .container {
    margin-left: 0;
  }
  @include desktop {
    .container {
      margin: 0 auto;
    }
  }
  .customer-greet {
    @include mobile {
      opacity: 0;
    }
    &.visibility-hidden {
      visibility: hidden !important;
    }
    font-weight: normal;
    opacity: 1;
    transition: opacity .2s;
  }
  .column {
    padding: 0;
  }
  .column.login-status {
    padding: 20px 20px 0 0;
    .icon {
      fill: $primary;
    }
    >span {
      @include tablet {
        color: $primary;
        display: inline-block;
        vertical-align: top;
        padding-top: 11px;
      }
    }
    .bd-notification {
      height: 100%;
      padding: 1.3rem 0;
      position: relative;
    }
  }
  background-color: $white;
  position: relative;
  div.logo {
    text-indent: -9999px;
    margin: 12px 0 0 75px;
    background-repeat: no-repeat !important;
  }
  &.invert div.logo {
    @include desktop {
      display: none;
    }
  }
  div.logo:hover {
    opacity: .8;
  }
  &.login {
    color: $base;
    background-color: $primary;
    .logo {
      margin: 16px auto auto;
    }
  }
  &.info {
    color: $base;
    border-bottom: 32px solid $prim-alt;
    .logo {
      margin: 1rem;
    }
  }
  .icon {
    transition: color .2s linear;
    &:hover {
      color: $secondary;
    }
  }
}

// Cookiebar
es-cookie-bar {
  z-index: 97;
  display: block;
  top: 0;
}

.cookies {
  overflow: hidden;
  background-color: transparentize($black, .2);
  h3, p {
    color: $base;
    margin: 0 .5rem;
  }
  p {
    @include tablet {
      font-size: 1rem;
    }
    font-size: .8rem;
  }
  a {
    color: $secondary;
    cursor: pointer;
  }
}

#cookieBanner {
  button {
    background-color: $secondary;
  }
}
