$defaultFontFamily: "Helvetica Neue",
"Helvetica",
"PingFang SC",
"Hiragino Sans GB",
"Microsoft YaHei",
"Noto Sans CJK SC",
"WenQuanYi Micro Hei",
"Arial",
sans-serif;
$bodyWidth:1250px;
$buttonDeleteBgColor:#f2f2f2;
$buttonDeleteColor:#a3a3a3;
$buttonDeleteBorderColor:#e5e5e5;
$buttonSuccessBgColor:#00ab6d;
$buttonSuccessColor:#fff;
$buttonSuccessFocusBgColor:#089462;
$buttonDefaultBgColor:#fff;
$buttonDefaultFocusBgColor:#fff;
$buttonDefaultBorderColor:#1e88e5;
$buttonInfoBgColor:#1890ff;
$buttonInfoFocusBgColor:#1e88e5;
$buttonInfoBorderColor:rgba(0, 0, 0, .21);
$buttonDangerBgColor:#e83333;
$buttonDangerFocusBgColor:#d03333;
$buttonWarningBgColor:#FFB300;
$buttonWarningBorderColor:#FFA000;
$buttonWarningFocusBgColor:#D84A4A;
$buttonWarningFocusBorderColor:#e83333;
$buttonESColor:#555;
$buttonQSColor:#fff;
$BUTTON_FONT_SIZE:13px;
$BUTTON_HOVER_SHADOW:0px 3px 3px rgba(0, 0, 0, 0.15);
$PLATE_PADDING:15px;
$SM_FIXEDMENU_HEIGHT:50px;
$MD_FIXEDMENU_HEIGHT:105px;
$PLATE_HOME_SIDEBAR_LEFT:256px;
$PLATE_SHADOW:0 4px 6px 0 rgba(31, 31, 31, 0.05),
0 0 2px 0 rgba(31, 31, 31, 0.2);
$MODAL_SHADOW:0 10px 30px rgba(0, 0, 0, .1);
$CONTENT-TOP: 106px;
$INHERIT-BORDER-COLOR: #eaeaea;
$HOME-SECOND-SIDEBAR-LEFT:242px;
$HOME-SIDEBAR-LEFT:241px;
$HOME-GROUP-LEFT:241px;
$HOME-GROUP-SHRINK-LEFT:61px;
$HOME-GROUP-SIDEBAR-LEFT:$HOME-SIDEBAR-LEFT+15;
$HOME-SHRINK-SIDEBAR-LEFT:51px;
$HOME-NAVBAR-HEIGHT:51px;
$DISPLAY-NAV-TOP:61px;
$FONT_SIZE:13px;

@mixin eo-animation ($animation) {
    -ms-animation: $animation;
    -moz-animation: $animation;
    -webkit-animation: $animation;
    animation: $animation;
}

@mixin eo-line ($height, $line-height:$height) {
    height: $height;
    line-height: $line-height;
}
%HOVER_ANIMATION{
    transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
%TAG_ITEM{
    
    .tag-item {
        background-color: #f1f8ff;
        display: inline-flex;
        padding-left: 10px;
        height: 23px;
        line-height: 25px;
        border-radius: 3px;
        margin-top: .25em;
        color: #555;
    }

    .btn-delete {
        border: 0;
        border-bottom-right-radius: 3px;
        border-left: 1px solid #b4d9ff;
        border-top-right-radius: 3px;
        color: #6a737d;
        width: 26px;
        margin-left: 10px;
        background-color: #f1f8ff;

        &:hover {
            background-color: #def;
        }
    }

    .text-span {
        white-space: nowrap;
        font-size: 12px;
    }
}
%EDIT-CODE-STYLE {
    .ace-editor-container {
        margin: 0;
        width: 100%;
    }

    .menu-td {
        width: 315px;
        background-color: #fff;
        padding: 10px;
        vertical-align: top;
        position: relative;
        z-index: 1;

        .title-p {
            margin-bottom: 10px;
        }

        .second-title-p {
            color: #999;
            margin-bottom: 10px;
            cursor: pointer;

            .iconfont {
                font-size: 12px;
                margin-left: 10px;
            }

            &:hover {
                color: #555;
            }
        }

        .label-li {
            line-height: 30px;

            a {
                color: $buttonInfoBgColor;
                margin: 0 10px 0 5px;

                &:hover {
                    text-decoration: underline;
                }
            }
        }

        .item-li {
            line-height: 30px;
            color: $buttonInfoBgColor;
            cursor: pointer;

            &:hover {
                text-decoration: underline;
            }
        }

        .menu-div {
            &:nth-last-child(n+2) {
                border-bottom: 1px dashed #e5e5e5;
                margin-bottom: 10px;
            }
        }
    }
}
%PAGE_FOOTER{
    .footer {
        background-color: #f8f8f8;
        display: flex;
        padding: 0 $PLATE_PADDING;
        flex-direction: row;
        align-items: center;
        // box-shadow: 0 4px 6px 0 rgba(31, 31, 31, 0.05);
        @include eo-line(40px);
        .divide-span {
            border-right: 1px solid #d9d9d9;
            @include eo-line(30px);
        }
    }

    .pagination {
        display: flex;
        align-items: center;

        .first-page,
        .last-page {
            border-radius: 3px;
        }
    }

    .pageFooter {

        .pagination>.active,
        .pagination>.active:hover,
        .pagination>.active:focus,
        .pagination>.active,
        .pagination>.active:hover,
        .pagination>.active:focus {
            background-color: #333;

            a {
                color: #fff;
            }
        }
    }

    .pagination-prev,
    .pagination-next {
        .iconfont {
            font-weight: bold;
        }
    }

    .pagination-prev {
        margin-right: 15px;
    }

    .pagination-next {
        margin-left: 15px;
    }

    .pagination-page {
        width: 25px;
        @include eo-line(25px);
        border-radius: 3px;
        margin-right: 5px;
    }
}
%GLOBAL_SEARCH_RESULT {
    .spac_search_result_wrap {
      width: 500px;
      max-height: 400px;
      overflow: auto;
      padding-bottom: 20px;
      right: 0;
      top: 45px;
      background-color: #fff;
      border: 1px solid #d9d9d9;
      border-radius: 6px;
      box-shadow: $MODAL_SHADOW;
    }
    .spac_search_result_box {
      &:last-child {
        border-bottom: none;
      }
    }
    .spac_search_result_title {
      padding: 20px 20px 10px;
      color: #999;
    }
    .divide_div {
      height: 1px;
      margin: 0 20px;
      background-color: #d9d9d9;
    }
    .spac_search_result_item {
      height: 40px;
      padding: 10px 20px;
      cursor: pointer;
      &:hover {
        background-color: #f7f7f7;
      }
    }
    .w_80percent {
      width: 80%;
    }
    .api_status {
      padding: 2px 10px;
    }
    
    .highlight{
        color: #fa5a1b;
      }
  }
%EO_BUTTON {
    @include eo-line(32px);
    cursor: pointer;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    font-size: $BUTTON_FONT_SIZE;
    padding: 0 10px;

    // display: flex;
    // flex-direction: row;
    .iconfont {
        font-size: 14px;
    }

    .iconfont+span {
        margin-left: 10px;
    }

    span:nth-last-child(n+2) {
        float: left;
    }

    &:hover {
        transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    }

    &:disabled {
        cursor: not-allowed;
    }
}

@function PX_TO_EM($PX) {
    @return ($PX / 14) * 1em;
}

@mixin eo-color ($color, $borderColor:$color) {
    color: #fff;
    background-color: $color;
    border: 1px solid $borderColor;
    border-radius: 3px;
}

@mixin eo-label ($color, $borderColor) {
    color: $borderColor;
    background-color: $color;
    border: 1px solid $borderColor;
    border-radius: 3px;
}

@mixin eo-modal-color ($color, $bgColor) {
    background-color: $bgColor;
    border: 1px solid $color;

    span,
    i {
        color: $color;
    }
}

//百分比-数字
@mixin eo-height ($percent, $height) {
    height: -webkit-calc(#{$percent} - #{$height});
    height: -ms-calc(#{$percent} - #{$height});
    height: -moz-calc(#{$percent} - #{$height});
    height: calc(#{$percent} - #{$height});
}

@mixin eo-min-height ($percent, $height) {
    min-height: -webkit-calc(#{$percent} - #{$height});
    min-height: -ms-calc(#{$percent} - #{$height});
    min-height: -moz-calc(#{$percent} - #{$height});
    min-height: calc(#{$percent} - #{$height});
}

@mixin eo-max-height ($percent, $height) {
    max-height: -webkit-calc(#{$percent} - #{$height});
    max-height: -ms-calc(#{$percent} - #{$height});
    max-height: -moz-calc(#{$percent} - #{$height});
    max-height: calc(#{$percent} - #{$height});
}

@mixin eo-width ($percent, $width) {
    width: -webkit-calc(#{$percent} - #{$width});
    width: -ms-calc(#{$percent} - #{$width});
    width: -moz-calc(#{$percent} - #{$width});
    width: calc(#{$percent} - #{$width});
}

@mixin eo-max-width ($percent, $width) {
    max-width: -webkit-calc(#{$percent} - #{$width});
    max-width: -ms-calc(#{$percent} - #{$width});
    max-width: -moz-calc(#{$percent} - #{$width});
    max-width: calc(#{$percent} - #{$width});
}

@mixin eo-left ($percent, $left) {
    left: -webkit-calc(#{$percent} - #{$left});
    left: -ms-calc(#{$percent} - #{$left});
    left: -moz-calc(#{$percent} - #{$left});
    left: calc(#{$percent} - #{$left});
}

@mixin eo-margin-top ($percent, $left) {
    margin-top: -webkit-calc(#{$percent} - #{$left});
    margin-top: -ms-calc(#{$percent} - #{$left});
    margin-top: -moz-calc(#{$percent} - #{$left});
    margin-top: calc(#{$percent} - #{$left});
}

@mixin EO-COLOR ($COLOR, $BORDER-COLOR, $BG-COLOR, $BORDER-TYPE:solid) {
    background-color: $BG-COLOR;
    border: 1px $BORDER-TYPE $BORDER-COLOR;
    color: $COLOR;
}