.header {
  color: rgba(var(--colors-primary-fill), 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  transition: top .3s ease;
  top: var(--header-top);
  backdrop-filter: blur(4px);

  .menu {
    transition: inset .3s ease, margin .3s ease, background .3s ease;
    position: absolute;
    left: 0;
    top: 0;
    margin: calc((var(--editor-head-height) - 42px) / 2) calc((var(--editor-menu-width) - 42px) / 2);
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    .icon {
      font-size: 16px;
    }
    &.abs {
      top: 100%;
      left: 0;
      background: rgba(27, 27, 28, 0.8);
      border-radius: 4px;
      border: 1px solid #000000;
      backdrop-filter: blur(4px);
      margin: 10px;

      .icon {
        font-size: 24px;
      }
    }
  }

  .main {
    flex: 1;
    text-align: center;
    font-size: var(--big-size);

    .title {
      font-size: 1em;
      font-weight: bold;
      display: inline-block;
      max-width: calc(100vw - 580px);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .split {
      padding-left: 0.625em;
    }
    
    .extra {
      margin-left: 0.625em;
    }
  }

  .split {
    position: relative;
    padding-right: 1em;

    &::after {
      content: '|';
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      color: var(--colors-border-color);
      font-size: 0.7em;
    }
  }

  .control {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 29px;
    font-size: 20px;
    display: flex;
    align-items: center;

    .pure {
      position: fixed;
      right: 10px;
      top: 10px;
    }

    a {
      color: transparent;
    }

    .item {
      margin-left: 1em;
    }

    .user {
      --bottom: 10px;
      width: 1.6em;
      height: calc(1.6em + var(--bottom));
      position: relative;
      margin-top: var(--bottom);

      &::after {
        bottom: var(--bottom) ;
      }
      
      .portrait {
        font-size: 1.6em;
        position: absolute;
        background-color: #424242;
        border-radius: 50%;
        left: 0;
        top: 0;
        bottom: var(--bottom);
        right: 0;
        overflow: hidden;
        display: flex;
        align-items: center;
        cursor: pointer;

        img {
          width: 100%;
          display: block;
          height: 100%;
          object-fit: cover;
        }
      }

      .login {
        cursor: pointer;
        font-size: 0.8em;
        color: var(--colors-primary-base) ;
      }
    }

    .save {
      margin-left: 10px;
    }
  }
}