/**
 * 子比子主题 - 登录方式切换（样式）
 *
 * 形态：两个文字按钮 + 主题色下划线，和父主题「注册」标题下的短横线同一种语言，
 * 不使用外来的分段胶囊，避免又出现「控件不像主题自带」的问题。
 */

.zic-login-mode {
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 0 0 2px;
    padding: 0 2px;
}

.zic-login-mode__item {
    position: relative;
    margin: 0;
    padding: 0 0 6px;
    border: 0;
    background: transparent;
    color: var(--muted-2-color, #999);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s;
}

.zic-login-mode__item:hover {
    color: var(--main-color, #333);
}

.zic-login-mode__item.is-active {
    color: var(--focus-color, #3ca5f6);
}

.zic-login-mode__item.is-active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transform: translateX(-50%);
}

/* 切换按钮下方紧接的第一个输入框，父主题默认 1.7em 上边距。
 * 占位文字在输入行底部（.scale-placeholder bottom:5px），若把边距压小，
 * 下划线就会贴到占位文字上，所以这里保持接近父主题默认值的间距。 */
.zic-login-mode + .line-form .line-form-input {
    margin-top: 1.6em;
}

@media (max-width: 479px) {
    .zic-login-mode {
        gap: 18px;
    }

    .zic-login-mode__item {
        font-size: 12.5px;
    }
}