@import '../../../../packages/arcodesign/style/mixin.less';

.arcodesign-pc-header {
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    right: 0;
    height: 60px;
    display: flex;
    min-width: 1320px;
    border-bottom: 1px solid;
    .use-var(background-color, container-background-color);
    .use-var(border-bottom-color, line-color);
    box-sizing: border-box;
    &-logo {
        display: flex;
        align-items: center;
        width: 260px;
        height: 60px;
        padding-left: 24px;
        &-btn {
            width: 32px;
            height: 32px;
            margin-right: 17px;
        }
        svg {
            max-height: 30px;
        }
    }
    &-content {
        position: relative;
        display: flex;
        flex: 1;

    }
    &-content-wrapper {
        position: relative;
        width: 100%;
        height: 60px;
        box-sizing: border-box;
    }
    &-search {
        display: flex;
        align-items: center;
        float: left;
        height: 60px;
        .arco-input {
            width: 246px;
            padding-left: 12px;
            padding-right: 0;
            border-radius: 0;
            border: none;
            background: 0 0;
            &-inner-wrapper {
                background-color: transparent;
                border-color: transparent;
                &:hover {
                    .use-var(background-color, line-color);
                }
                svg {
                    .use-var(color, sub-info-font-color);
                }
            }
        }
        .arco-input-inner-wrapper-focus.arco-input-inner-wrapper,
        .arco-search-input-open .arco-input-inner-wrapper {
            background-color: transparent;
            .use-var(border-color, primary-color);
            svg {
                .use-var(color, sub-font-color);
            }
        }
        .arco-input-group-prefix {
            svg {
                width: 16px;
                height: 16px;
            }
        }
        .arco-input-group-wrapper {
            .use-var(background-color, lighter-line-color);
        }
    }
    .highlight-word {
        font-weight: bold;
        .use-var(color, primary-color);
    }
    .arcodesign-pc-search-title {
        font-size: 14px;
        font-weight: 400;
        margin-bottom: 2px;
    }
    .arcodesign-pc-search-summary {
        font-size: 12px;
        .use-var(color, sub-font-color);
        padding: 12px 20px 4px 20px;
        font-weight: 400;
    }
    .arcodesign-pc-search-loading {
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 400;
        .use-var(color, sub-font-color);
    }
    .arcodesign-pc-search-nodata {
        height: 100px;
        line-height: 100px;
        text-align: center;
        font-weight: 400;
    }
    &-nav-bar {
        float: right;
        height: 60px;
        display: flex;
        align-items: center;
    }
    .header-language-set {
        height: 27px;
        .use-var(color, font-color);
        font-weight: 500;
        padding: 0 8px;
    }
    &-tabs {
        display: flex;
        &-item {
            display: flex;
            padding: 0 14px;
            align-items: center;
            &-inner {
                position: relative;
                padding: 3px 8px;
                font-weight: 500;
                .use-var(color, font-color);
                font-size: 14px;
                cursor: pointer;
                display: flex;
                align-items: center;
                &.active {
                    .use-var(color, primary-color);
                    cursor: default;
                    &:after {
                        content: '';
                        position: absolute;
                        left: 8px;
                        right: 8px;
                        bottom: -18px;
                        height: 3px;
                        .use-var(background-color, primary-color);
                    }
                }
                &:hover {
                    .use-var(background-color, lighter-line-color);
                }
            }
            &.language-item {
                border-left: 1px solid;
                .use-var(border-left-color, line-color);
                margin-left: 14px;
            }
            a {
                display: contents;
                .use-var(color, primary-color);
            }
            svg {
                font-size: 22px;
            }
            .header-language-set {
                svg {
                    font-size: 12px;
                }
                span, svg {
                    vertical-align: middle;
                }
            }
            .placeholder {
                width: 58px;
                height: 22px;
            }
            &.gitlab {
                .use-var(color, primary-color);
            }
        }
    }
}
