@import "~ant-design-vue/es/style/themes/default";

@global-header-prefix-cls: ~'@{ant-prefix}-pro-global-header';

@pro-header-bg                     : @component-background;
@pro-header-hover-bg               : @component-background;
@pro-header-box-shadow             : 0 1px 4px rgba(0, 21, 41, 0.08);
@pro-header-hover-trigger-action-bg: rgba(0, 0, 0, .025);

.@{global-header-prefix-cls} {
    position  : relative;
    height    : @layout-header-height;
    padding   : 0;
    background: @pro-header-bg;
    box-shadow: @pro-header-box-shadow;

    &-index-right {
        float      : right;
        height     : 100%;
        margin-left: auto;
        overflow   : hidden;

        .@{global-header-prefix-cls}-index-action {
            min-width     : 115px;
            max-width     : 150px;
            display   : block;
            height    : 100%;
            padding   : 0 10px;
            cursor    : pointer;
            transition: all .3s;

            &:hover {
                background: @pro-header-hover-trigger-action-bg;
            }
        }
    }

    &-logo {
        display       : inline-block;
        height        : @layout-header-height;
        padding       : 0 0 0 24px;
        font-size     : 20px;
        line-height   : @layout-header-height;
        vertical-align: top;
        cursor        : pointer;

        img,
        svg {
            display       : inline-block;
            width         : 32px;
            height        : 32px;
            vertical-align: middle;
        }
    }

    &-menu {
        .anticon {
            margin-right: 8px;
        }

        .ant-dropdown-menu-item {
            min-width: 160px;
        }
    }

    &-tools {
        padding-left: 15px;
    }

    &-trigger {
        display      : block;
        float        : left;
        height       : 100%;
        padding      : 0 12px;
        height       : @layout-header-height;
        // padding   :~'calc((@{layout-header-height} - 26px) / 2)'12px;
        font-size    : 16px;
        cursor       : pointer;
        transition   : all 0.3s, padding 0s;
    }

    &-breadcrumb {
        float      : left;
        margin-left: 45px;
        color      : rgba(0, 0, 0, 0.45);

        .active {
            color: rgba(0, 0, 0, 0.65);
        }
    }

    .dark {
        height: @layout-header-height;

        .action {
            color: rgba(255, 255, 255, 0.85);

            >i {
                color: rgba(255, 255, 255, 0.85);
            }

            &:hover,
            &.opened {
                background: @primary-color;
            }

            .ant-badge {
                color: rgba(255, 255, 255, 0.85);
            }
        }
    }

    .ant-pro-global-header-index-action {
        i {
            color         : rgba(0, 0, 0, .65);
            vertical-align: middle;
        }
    }

}