.header-container {
  width: 100vw;
  height: var(--appHeaderHeight, 54px);
  background-color: var(--primaryColor);
  display: flex;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  padding-left: 16px;
  -webkit-app-region: drag;
  flex-shrink: 0;
  font-size: 1rem;
  position: relative;
  z-index: 20000;

  & .left-part {
    display: flex;
    align-items: center;

    & .logo {
      width: 142px;
      height: 1.2rem;
      color: var(--headerTextColor);
      display: flex;
      align-items: center;

      & svg {
        height: 1.1rem;
        width: auto;
      }
    }

    & .header-search {
      -webkit-app-region: none;
      background-color: var(--headerPlaceholderColor, rgba($color: #000, $alpha: 0.14));
      position: relative;
      height: 28px;
      width: 220px;
      border-radius: 14px;
      padding: 0 8px;
      display: flex;
      align-items: center;
      margin-left: 14px;

      & .header-search-input {
        flex: auto;
        font-size: 1rem;
        line-height: 1.2rem;
        outline: none;
        border: none;
        background-color: transparent !important;
        color: var(--headerTextColor);

        &::placeholder {
          opacity: 0.7;
          user-select: none;
          color: var(--headerTextColor);
        }
      }

      & .search-submit {
        $box-size: 1.3em;
        margin-left: 2px;
        width: #{$box-size};
        height: #{$box-size};
        color: var(--headerTextColor);
        opacity: 0.7;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;

        &:hover {
          opacity: 1;
        }

        & svg {
          width: #{$box-size};
          height: #{$box-size};
        }
      }
    }
  }

  & .right-part {
    width: 120px;
    height: 100%;
    color: var(--headerTextColor);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    -webkit-app-region: none;
    padding-right: 16px;

    & .header-divider {
      margin-left: 6px;
      margin-right: 6px;
      height: 16px;
      width: 1px;
      opacity: 0.2;
      background-color: var(--headerTextColor);
    }

    & .sparkles-icon:hover {
      animation: vibrate 0.3s linear infinite both;
    }

    & .header-button {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 20px;
      opacity: 0.6;
      cursor: pointer;

      &:hover {
        opacity: 1;
      }

      & svg {
        width: 20px;
        height: 20px;
      }
    }
  }
}

@keyframes vibrate {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translate(-1px, 1px);
  }
  40% {
    transform: translate(-1px, -1px);
  }
  60% {
    transform: translate(1px, 1px);
  }
  80% {
    transform: translate(1px, -1px);
  }
  100% {
    transform: translate(0);
  }
}
