/*
全局less样式
*/

* {
    box-sizing: border-box;
}

:root {
    --fontSize: 16px;
    --primaryColor: #002855;
    --primaryColor2: #903499;
    --primaryColor3: #009cde;
    --primaryFontColor: #333;
    --primaryBorderColor: rgb(227, 227, 227);
    --primaryBorder: 1px solid var(--primaryBorderColor);
    /* 默认值（移动端优先） */
    --pageWidth: 100vw;
    --pageWidthRowPadding: 0.75rem;

    /* 平板/小桌面 */
    @media (min-width: 769px) and (max-width: 1200px) {
        --pageWidth: min(90vw, 1200px);
        --pageWidthRowPadding: 0;
    }

    /* 大桌面 */
    @media (min-width: 1201px) {
        --pageWidth: min(80vw, 1400px);
        --pageWidthRowPadding: 0;
    }

    font-size: var(--fontSize);
}

* {
    box-sizing: border-box;
}

body {
    font-size: var(--fontSize);
    color: var(--primaryFontColor);
}

table {
    border-collapse: collapse;

    th,
    td {
        border: var(--primaryBorder);
        padding: 0.1rem 0.5rem;

    }

    th {
        background-color: #eee;
    }
}

.page-width {
    width: var(--pageWidth);
    padding: 0 var(--pageWidthRowPadding);
    margin: 0 auto;
}

// flex布局

.flex,
.flex-row {
    display: flex;
}

.flex-row-reverse {
    .flex();
    flex-direction: row-reverse;
}

.row-center {
    .flex();
    justify-content: center;
}

.row-between {
    .flex();
    justify-content: space-between;
}

.row-around {
    .flex();
    justify-content: space-around;
}

.flex-col {
    .flex();
    flex-direction: column;
}

.flex-col-reverse {
    .flex();
    flex-direction: column-reverse;
}

.col-center {
    .flex();
    align-items: center;
}

.col-top {
    .flex();
    align-items: flex-start;
}

.col-bottom {
    .flex();
    align-items: flex-end;
}

.full-center {
    .flex();
    justify-content: center;
    align-items: center;
}

.flex-wrap {
    .flex();
    flex-wrap: wrap;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}


// 省略
.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ellipsis-n {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    /* -webkit-line-clamp: 2; */
    -webkit-box-orient: vertical;
    word-wrap: break-word;
}


// 图片
.obj-cover {
    object-fit: cover;
}

.obj-contain {
    object-fit: contain;
}


// 关于换行
.no-word-wrap {
    white-space: nowrap
}


// 阴影
/* 一级阴影（轻度） */
.shadow-1-down {
    box-shadow:
        0px 1px 2px -2px rgba(0, 0, 0, .16),
        0px 3px 6px 0px rgba(0, 0, 0, .12),
        0px 5px 12px 4px rgba(0, 0, 0, .09);
}

.shadow-1-up {
    box-shadow:
        0px -1px 2px -2px rgba(0, 0, 0, .16),
        0px -3px 6px 0px rgba(0, 0, 0, .12),
        0px -5px 12px 4px rgba(0, 0, 0, .09);
}

.shadow-1-left {
    box-shadow:
        -1px 0px 2px -2px rgba(0, 0, 0, .16),
        -3px 0px 6px 0px rgba(0, 0, 0, .12),
        -5px 0px 12px 4px rgba(0, 0, 0, .09);
}

.shadow-1-right {
    box-shadow:
        1px 0px 2px -2px rgba(0, 0, 0, .16),
        3px 0px 6px 0px rgba(0, 0, 0, .12),
        5px 0px 12px 4px rgba(0, 0, 0, .09);
}

/* 二级阴影（中度） */
.shadow-2-down {
    box-shadow:
        0px 3px 6px -4px rgba(0, 0, 0, .16),
        0px 6px 16px 0px rgba(0, 0, 0, .12),
        0px 9px 28px 8px rgba(0, 0, 0, .09);
}

.shadow-2-up {
    box-shadow:
        0px -3px 6px -4px rgba(0, 0, 0, .16),
        0px -6px 16px 0px rgba(0, 0, 0, .12),
        0px -9px 28px 8px rgba(0, 0, 0, .09);
}

.shadow-2-left {
    box-shadow:
        -3px 0px 6px -4px rgba(0, 0, 0, .16),
        -6px 0px 16px 0px rgba(0, 0, 0, .12),
        -9px 0px 28px 8px rgba(0, 0, 0, .09);
}

.shadow-2-right {
    box-shadow:
        3px 0px 6px -4px rgba(0, 0, 0, .16),
        6px 0px 16px 0px rgba(0, 0, 0, .12),
        9px 0px 28px 8px rgba(0, 0, 0, .09);
}

/* 三级阴影（重度） */
.shadow-3-down {
    box-shadow:
        0px 6px 16px -8px rgba(0, 0, 0, .16),
        0px 9px 28px 0px rgba(0, 0, 0, .12),
        0px 12px 48px 16px rgba(0, 0, 0, .09);
}

.shadow-3-up {
    box-shadow:
        0px -6px 16px -8px rgba(0, 0, 0, .16),
        0px -9px 28px 0px rgba(0, 0, 0, .12),
        0px -12px 48px 16px rgba(0, 0, 0, .09);
}

.shadow-3-left {
    box-shadow:
        -6px 0px 16px -8px rgba(0, 0, 0, .16),
        -9px 0px 28px 0px rgba(0, 0, 0, .12),
        -12px 0px 48px 16px rgba(0, 0, 0, .09);
}

.shadow-3-right {
    box-shadow:
        6px 0px 16px -8px rgba(0, 0, 0, .16),
        9px 0px 28px 0px rgba(0, 0, 0, .12),
        12px 0px 48px 16px rgba(0, 0, 0, .09);
}

// thinkphp6.1的paginate分页的样式
.pagination {
    .full-center();
    .flex-wrap();
    overflow-x: auto;

    >li {
        @width: 2.3rem;
        width: @width;
        height: @width;
        margin: 0 0.15rem;
        font-size: 1rem;
        border-radius: 50%;
        color: var(--primaryFontColor);

        >a,
        >span {
            .full-center();
            width: 100%;
            height: 100%;
            color: inherit;
            font-size: inherit;
        }

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

        &.disabled {
            background-color: transparent;
            cursor: not-allowed;
        }

        &.active {
            background-color: var(--primaryColor);
            color: #fff;
        }
    }
}