// 主题
$theme-color: #ffe60f; // 品牌色/主操作按钮/按钮移入/文字链

// 辅助颜色
$success-color: #07cc89;
$success-color-1: #bdf6e3;
$success-color-2: #e7fef8;
$warning-color: #ffa200;
$warning-color-1: #ffd282;
$warning-color-2: #fff2dc;
$error-color: #f96950;
$error-color-1: #ffaa9c;
$error-color-2: #ffece9;
$aux-color: #5170fe;
$info-color: #999;
$label-color: #00c1f6;
$other-color: #b03afe;

$warning-fill: #fff3d4;
$aux-fill: #e7ebff;

// 文字
$font-color: rgba(51, 51, 51, 1); // 主要颜色/图标移入
$font-aux-color: rgba(169, 170, 181, 1); // 辅助色/提示文字
$font-minor-color: #999; // 次要颜色
$font-disabled-color: #c2c2c2; // 禁用文字
$font-reverse-color: #fff; // rgba(#fff, 0.85); // 反差色

$font-size-xm: 36rpx;
$font-size-m: 32rpx;
$font-size: 28rpx;
$font-size-s: 24rpx;

$font-weight: 500;

// 分割色
$split-color: #e6e6e6;
// 边框色
$border-color: $split-color;
$border-input-color: #e8eaec;

// 背景色
$page-fill: #fafafa;
$nav-fill: #fff;
$bg-fill: #fff;
$bg-aux-fill: #f5f5f5;
$bg-theme-aux-fill: #fffdee;
$bg-reverse-fill: #2d2d2d;
$input-fill: #fafafa;
$menuItem-hover-fill: #f7f7f7;
$hover-fill: #f9f9f9;
$error-fill: $error-color;
$hover-theme-fill: #eed715;
$disabled-theme-fill: #fff387;
$bg-minor-theme-fill: #fffde9;
$click-active-fill: #fbfbfb;

// 按钮
$btn-fill: #eeeeee; //#f5f5f5;
$btn-hover-fill: #e6e6e6;
$btn-disabled-fill: #dbdbdb; //#f5f5f5;
$btn-error-fill: #ffefec;
$btn-primary-fill: $theme-color;
$btn-primary-hover-fill: #f8e00e; //#eed715;
$btn-primary-disabled-fill: #fff387;

// 滚动条颜色
$scroll-color: #f5f5f5;
// 图标
$icon-color: #4d4d4d;
$icon-minor-color: #999;
$icon-aux-color: #ccc;
$icon-hover-fill: $hover-fill;
// tab
$tab-active-color: #333; // 分页激活色

/* 色彩 */
$bgc-common: #fff; // #141414
$minor-color: #333333;

$main-text-color: #535353; //主要字体颜色
$minor-text-color: #68738a; //次要字体颜色

// 字体
$font-small: PingFangSC-Regular; // 细体
$font-bold: PingFangSC-Medium; // 粗体

// 间隔
$space-m: 48rpx;
$space: 30rpx;
$space-s: 24rpx;
$space-xs: 16rpx;
$space-xxs: 8rpx;
// 圆角
$radius-xxm: 64rpx;
$radius-xm: 48rpx;
$radius-m: 32rpx;
$radius: 20rpx;
$radius-s: 8rpx;

// 圆边
$b-radius: 8px;
$b-radius-s: 4px;

// 盒子间隔
$box-margin: 16px;

// 按钮
$btn-margin: $box-margin;

// 控制台页面内边距
$page-padding: 24px 24px 0;

// 边颜色
$border-color: rgba(235, 235, 235, 1);

@mixin safe-bottom($h) {
    bottom: $h;
    bottom: calc($h + constant(safe-area-inset-bottom));
    bottom: calc($h + env(safe-area-inset-bottom));
}

@mixin safe-height($h) {
    height: calc($h);
    height: calc($h - constant(safe-area-inset-bottom));
    height: calc($h - env(safe-area-inset-bottom));
}

@mixin safe-padding-bottom($h: 0rpx) {
    padding-bottom: calc($h);
    padding-bottom: calc($h + constant(safe-area-inset-bottom));
    padding-bottom: calc($h + env(safe-area-inset-bottom));
}

@mixin safe-margin-bottom($h: 0rpx) {
    margin-bottom: calc($h);
    margin-bottom: calc($h + constant(safe-area-inset-bottom));
    margin-bottom: calc($h + env(safe-area-inset-bottom));
}

// 单行省略
@mixin single-ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

// 多行省略
@mixin multiple-ellipsis($line: 3) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $line;
}

@mixin hidden-scrollbar {
    &::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }
}

// 顶部通栏样式
@mixin nav-bar {
    :deep(.uni-navbar) {
        width: 100%;
        background: $nav-fill;

        .title {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            font-size: 32rpx;
            font-weight: 500;
        }

        .uni-navbar__header-container {
            padding: 0;
        }

        .uni-nav-bar-text {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            font-size: 32rpx;
            font-weight: 500;
        }

        .uni-navbar--border {
            border-bottom-color: $split-color !important;
        }
    }
}

// 字体描边
@mixin font-stroke($color: #424155, $stroke: 3px) {
    position: relative;
    z-index: 0;

    &::after {
        width: 100%;
        content: attr(data-content);
        -webkit-text-stroke: $stroke * 2 $color;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;
    }
}