trillo-react/src/SASS/layout/_home.scss

.header {
  display: flex;
  font-size: $normal-font-size;

  // main axis
  justify-content: space-between;

  // cross axis
  align-items: center;

  &__logo {
    height: 3.25rem;
    margin-left: 2rem;
  }

  &__search {
    flex: 0 0 40%;

    display: flex;
    align-items: center;
    justify-content: center;

    &--input {
      font-family: inherit;
      font-size: inherit;
      background-color: $color-grey-light-2;
      border: none;
      color: inherit;
      padding: 0.7rem 2rem;
      border-radius: 100px;
      width: 90%;
      transition: all 0.2s;
      margin-right: -3.25rem;

      &:focus {
        outline: none;
        width: 100%;
        background-color: $color-grey-light-3;
      }

      &::-webkit-input-placeholder {
        font-weight: 100;
        color: $color-grey-light-4;
      }
    }

    &--input:focus + &--button {
      background-color: $color-grey-light-3;
    }

    &--button {
      border: none;
      background-color: $color-grey-light-2;

      &:focus {
        outline: none;
      }

      &:active {
        transform: translateY(2px);
      }
    }

    &--icon {
      height: 2rem;
      width: 2rem;
      fill: $color-grey-dark-3;
    }
  }

  &__user-nav {
    display: flex;
    align-items: center;
    align-self: stretch;

    & > * {
      padding: 0 2rem;
      cursor: pointer;
      height: 100%;
      display: flex;
      align-items: center;
    }

    & > *:hover {
      background-color: $color-grey-light-2;
    }

    &--icon-box {
      position: relative;
    }

    &--icon {
      height: 2.25rem;
      width: 2.25rem;
      fill: $color-grey-dark-2;
    }

    &--notification {
      font-size: 0.8rem;
      font-weight: 800;
      height: 1.75rem;
      width: 1.75rem;
      border-radius: 50%;
      background-color: $color-primary;
      color: $color-white;
      position: absolute;
      top: 1.5rem;
      right: 1.1rem;

      display: flex;
      justify-content: center;
      align-items: center;
    }

    &--user-photo {
      height: 3.75rem;
      border-radius: 50%;
      margin-right: 1rem;
    }
  }
}