hubl/src/styles/base/header.scss

#header {
  max-height: 83px;
  height: 83px;
  align-items: center;
  background-color: $color-0-0-100;
  color: $color-216-4-22;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09);
  display: flex;
  flex-shrink: 0;
  // padding: 1.6rem 0.64rem;
  padding: 0 2.5rem;
  position: relative;
  z-index: 1;

  #logo {
    flex: 1 1 0;
  }
  
  #search-bar {
    position: relative;
    
    #search-input {
      border-radius: 10em;
      padding: 0.64rem 1.28rem;
      border: 1px solid $color-215-9-73;
      height: 3.8rem;
      width: 28rem;
      -webkit-appearance: textfield;
    
      & ~ #close-search-icon,
      & ~ #search-icon {
        color: $color-215-9-73;
        display: block;
        font-size: 1.7rem;
        margin: auto;
        position: absolute;
        right: 3.7rem;
        top: 50%;
        transform: translateY(-50%);
        -webkit-text-stroke: 1px $color-215-9-73;
      }
    
      & ~ #close-search-icon {
        opacity: 0;
      }
    
      &:focus {
        & ~ #close-search-icon {
          opacity: 1;
        }
    
        & ~ #search-icon {
          visibility: hidden;
        }
      }
    }
  }

  sib-notifications {

    @include breakpoint(sm) {
      padding: 0;
    }
  }
  
  details {
    margin-right: 2.5rem;
    position: relative;

    @include breakpoint(sm) {
      margin-right: 0;
    }
  
    summary {
  
      &::-moz-list-bullet {
        list-style-type: none; /* To remove the disclosure triangle on Firefox v.<69 */
      }
  
      &::-webkit-details-marker {
        display: none;
      }
    }
  }
  
  .sib-notifications__container {
    position: relative;
  
    .sib-notifications__button {
      @include icon('bell');
      font-size: 3rem;
  
      &::before {
        margin-left: 0;
      }
  
      img {
        display: none;
      }
  
      .sib-notifications__counter {
        left: 2.1rem;
        position: absolute;
        top: -3px;
      }
    }
  
    .sib-notifications__list {
      position: absolute;
      right: 0;
      top: 5.6rem;
    }
  }
  
  #user-controls {
    padding: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    summary {
      padding: 18px;
      cursor: pointer;
      display: block; /* To remove the disclosure triangle on Firefox v.>=69 */

      &:focus {
        background-color: $color-233-18-29;
        color: $color-0-0-100;
        outline: none;
      }
    }
  
    #user-controls__profile {
      div {
        display: flex;
        flex-direction: row-reverse;
        
        > * {
          vertical-align: middle;
        }

        hubl-user-avatar {
          align-items: center;
          background-color: $color-213-20-91;
          border-radius: 50%;
          display: flex;
          height: 4.8rem;
          justify-content: center;
          margin-right: 2rem;
          overflow: hidden;
          width: 4.8rem;

          @include breakpoint(sm) {
            margin-right: 0;
          }
        }

        img {
          background-color: white;
          height: 100%;
          object-fit: cover;
          object-position: center;
          width: 100%;
        }

        object {
          height: 45%;
          width: 45%;
        }
  
        sib-display-value[name='first_name'] {
          @include icon('arrow-down');
          align-items: center;
          display: flex;
          flex-direction: row-reverse;
          font-size: 1.8rem;
          font-weight: 600;
  
          &::before {
            margin-left: 1.5rem;
          }

          @include breakpoint(sm) {
            display: none;
          }
        }
      }
    }
  
    #user-controls__panel {
      height: 0;
      position: absolute;
      right: 0;
      z-index: 1;
      width: 100%;
      top: 83px;
      
      > nav {
        background-color: $color-0-0-100;
        box-shadow: 0 7px 8px 0 rgba(0, 0, 0, 0.16);
        position: absolute;
        right: 0;
        top: 0;
        width: 100%;
        
        ul {
          list-style: none;
          margin: 0;
          padding: 0;
          
          li {
  
            sib-link {
              color: $color-213-4-50;
              display: block;
              border-bottom: 1px solid $color-213-20-91;
              margin-right: 0;
              padding: 1.6rem 1.3rem;
              &:hover {
                color: $color-244-73-62;
              }
            }
          }
        }
  
        button {
          color: $color-213-4-50;
          padding: 1.6rem 1.3rem;
          text-align: left;
          width: 100%;
        }
      }
    }
  
    &[open] {
      background-color: $color-233-18-29;
      color: $color-0-0-100;
  
      #user-controls__profile {
  
        div {
  
          sib-display-value[name='first_name'] {
            @include icon('close');
  
            &::before {
              margin-left: 1.5rem;
            }
          }
        }
      }
    }
  }

  .mobile-menu-icon {
    display: none;

    @include breakpoint(sm) {
      display: block;
      padding-left: 0;
      font-size: 26px;
    }
  }
}