/**
 * description here
 * @author mark
 * @since 2022/03/11 21:46:22
 * @modified 2022/03/16 18:10:23
 * @filename common-tab.css
 */

/** TAB页的容器 **/
.x-tab-box {
}

.x-tab-box.pad0 {
    padding: 0px;
}

/* TAB页的链接样式 */
.tab-link, .x-tab {
    float: left;
    padding: 2px;
    padding-left: 5px;
    cursor: pointer;
    margin-right: 5px;
    margin-bottom: 5px;
    margin-top: 5px;
    line-height: 20px;
    color: #ccc;
    border: 1px solid transparent;
}

.tab-link:hover, .x-tab:hover {
    color: #000;
}

.x-tab.active {
    display: inherit;
    color: #000;
}

.x-tab.title {
    color: #000;
    cursor: default;
    text-decoration: none;
}

/** 按钮模式 **/
.x-tab-btn, .x-tab.btn, .x-tab-box.btn-style .x-tab {
    color: black;
    background-color: #eee;
    border: none;
    border-radius: 3px;
    margin-top: 5px;
    color: #08c;
    padding-left: 5px;
    padding-right: 5px;
}

/** 按钮hover **/
.x-tab-btn:hover, .x-tab.btn:hover, .x-tab-box.btn-style .x-tab:hover {
    /*background-color: #4f88e1;*/
    /*border-color: #4f88e1;*/
    /* #05c 深蓝色 */
    /* #06f 亮蓝色 */
    /* #08c 天蓝色 */
    background-color: #08c;
    color: #fff;
    text-decoration: none;
}

/*span的样式*/
.x-tab-box.btn-style span.x-tab, .x-tab-box.btn-style span.x-tab:hover {
    color: black;
    background-color: #fff;
}

/** 按钮被选中 **/
.x-tab-btn.active, .x-tab.btn.active, .x-tab-box.btn-style .x-tab.active {
    background-color: #08c;
    color: #fff;
}

/** Dark 模式 **/
.x-tab-box.dark .x-tab.active,.x-tab-box.dark .x-tab:hover {
	background-color: gray;
	color: #fff;
}

.x-tab-box.dark .x-tab {
    border-color: #ccc;
}

/** Dark 模式 **/
.x-tab-box.dark-style .x-tab.active, .x-tab-box.dark-style .x-tab:hover {
    background-color: gray;
    color: #fff;
    border-radius: 2px;
}

/** 下划线模式 **/
.x-tab-box.underline-style .x-tab {
    border-left: none;
    border-right: none;
    padding-left: 5px;
    padding-right: 5px;
}
.x-tab-box.underline-style .x-tab.active {
    border-bottom: 3px solid #06f;
    text-decoration: none;
}
.x-tab-box.underline-style .x-tab:hover {
    border-bottom: 3px solid #06f;
    text-decoration: none;
}
.x-tab-box.underline-style.green .x-tab.active {
    border-bottom: 3px solid green;
    text-decoration: none;
}
.x-tab-box.underline-style.green .x-tab:hover {
    border-bottom: 3px solid green;
    text-decoration: none;
}
.x-tab-box.underline-style.red .x-tab.active {
    border-bottom: 3px solid red;
    text-decoration: none;
}
.x-tab-box.underline-style.red .x-tab:hover {
    border-bottom: 3px solid red;
    text-decoration: none;
}

/** border-style **/
.x-tab-box.border-style .x-tab.active,.x-tab-box.border-style .x-tab:hover {
    border: 2px solid #06f;
    text-decoration: none;
    border-radius: 2px;
}

.x-tab-box.border-style .x-tab {
    border: 2px solid transparent;
    text-decoration: none;
    border-radius: 2px;
}

.x-tab-table {
    width: 100%;
}

.x-tab-table td {
    border: none;
    padding: 0px;
}