//混入

@mixin flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

@mixin display-flex{
	display: flex;
	align-items: center;
}

@mixin position-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

@mixin flex-column {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

@mixin flex-row {

    display: flex;
	flex-direction: row;
}
@mixin font-color-transprent {
	  -webkit-background-clip: text;
	   background-clip: text;
	   color: transparent !important;
	   display: inline-block;
}

// 添加渐变边框mixin
@mixin gradient-border($start, $end) {
  background:
    linear-gradient(white, white) padding-box,
    linear-gradient(90deg, $start, $end) border-box;
  border-radius: 12px;
  border: 1px solid transparent;
}

@mixin gradient-circle-border($start, $end) {
	background:
		linear-gradient(white, white) padding-box,
		linear-gradient(90deg, $start, $end) border-box;
	border-radius: 50%;
	border: 1px solid transparent;
}

@mixin text-gradient($angle, $start-color, $start-percent, $end-color, $end-percent) {
	background: linear-gradient($angle, $start-color $start-percent, $end-color $end-percent);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	display: inline-block;
}

@mixin scrollBar {

    //滚动条轨道
    &::-webkit-scrollbar-track {
        background: #d3dce6;
    }

    //设置滚动条的宽度和高度
    &::-webkit-scrollbar {
        width: 6px; //竖直滚动条宽度
        height: 6px; //水平滚动条高度
    }

    //滚动条滑块（可以拖动的部分）
    &::-webkit-scrollbar-thumb {
        background: #99a9bf;
        border-radius: 20px;
    }
}
@mixin container-bg {
	background:
	    linear-gradient(180deg, #e1ddfd 0%, $background-color 850px),
	    $background-color 850px;
	  background-repeat: no-repeat;
	  background-size: 100% 850px, 100% calc(100% - 850px);
	  background-position: top, bottom;
}