.top-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    padding: 0 15px 0 8px;
    height: var(--top-header-height);
    background-color: var(--bg-color);
    box-shadow: 0 0 5px var(--gray-ee);
    border-bottom: 1px solid var(--gray-ee);
}

.top-header .left {
    height: 100%;
}

.top-header .left .logo {
    width: calc(var(--top-header-height) - 4px);
    height: calc(var(--top-header-height) - 4px);
}

.top-header .left span {
    font-weight: bold;
    letter-spacing: 0.3px;
    color: var(--main-color);
}

.top-header .left span + span {
    margin-left: 0.05em;
}

.top-header .left a {
    font-size: 13px;
    margin-left: 20px;
    color: var(--gray-66);
}

.top-header .left a:hover {
    color: var(--main-color);
    text-decoration: underline;
}

.top-header .right .language-button {
    cursor: pointer;
    font-size: 13px;
    color: var(--gray-88);
    letter-spacing: 0.3px;
}

.top-header .right .language-button:hover {
    color: var(--text-color);
}

.top-header .right .icon-button {
    display: inline-block;
}

.top-header .right .iconfont {
    color: var(--gray-88);
    transition: color 300ms;
}

.top-header .right .icon-button .iconfont:hover {
    color: var(--text-color);
}

.top-header .right .icon-button .iconfont {
    cursor: pointer;
    user-select: none;
}

.top-header .right .icon-button .icon-github {
    font-size: 20px;
}

.top-header .right .theme-button-group {
    cursor: pointer;
    user-select: none;
}

.top-header .right .left-bar {
    position: relative;
    margin-left: 15px;
    padding-left: 15px;
}

.top-header .right .left-bar::before {
    position: absolute;
    content: "";
    left: 0;
    top: calc(50% - 5.5px);
    width: 1px;
    height: 15px;
    background-color: var(--gray-f5);
}

.top-header .right .icon-sun-fill {
    color: #f49c46;
}

.top-header .right .icon-moon,
.top-header .right .icon-moon-fill {
    display: inline-block;
    transform: scale(0.9) rotate(-25deg) translateX(-0.1em);
}

html:not(.dark-mode) .top-header .right .icon-sun,
html:not(.dark-mode) .top-header .right .icon-moon-fill {
    display: none;
}

/* dark mode */
.dark-mode .top-header .right .icon-moon,
.dark-mode .top-header .right .icon-sun-fill {
    display: none;
}