//代码主题颜色
@mixin code-color($value) {
    &.v--#{$value} {
        @content;
    }
}

//文本颜色
@mixin text-color($key, $value) {
    #{$V}text--#{$key},
    #{$V}text--#{$key}:before {
        color: $value !important;
    }
}

//背景颜色
@mixin bg-color($key, $value) {
    #{$V}bg--#{$key} {
        background-color: $value !important;
    }
}

//边框颜色
@mixin border-color($key, $value) {
    #{$V}border--#{$key} {
        border-color: $value !important;
    }
}

//表格表头主题颜色
@mixin table-thead-color($key, $value) {
    .v-thead--#{$key} th {
        @if $key == "light" {
            background-color: nth($value, 1);
        }
        @else {
            color: $--white;
            background-color: nth($value, 1);
            border-color: nth($value, 2);
        }
    }
}

//表格背景主题颜色
@mixin table-bg-color($key, $value) {
    &.v--#{$key},
    &.v--#{$key} > th,
    &.v--#{$key} > td {
        color: if($key == "light", inherit, $--white);
        background-color: nth($value, 1);
    }
    &.v--#{$key},
    &.v--#{$key}.v-border {
        th,
        td {
            border-color: nth($value, 3);
        }
    }
    &.v--#{$key} thead th {
        background-color: nth($value, 2) !important;
        border-color: nth($value, 4) !important;
    }
    &.v--#{$key}.v-striped tbody tr:nth-of-type(even) {
        background-color: nth($value, 5);
    }
    &.v--#{$key}.v-hover tbody tr:hover {
        background-color: nth($value, 2);
    }
}

//popup Msg提示类型颜色
@mixin message-color($key, $value) {
    &.v--#{$key} {
        color: nth($value, 1);
        @if $key == "dark" {
            background-color: rgba(nth($value, 2), .6);
            border: 0;
        }
        @else {
            background-color: nth($value, 2);
            border-color: rgba(nth($value, 1), .5);
        }
    }
}

//input主题颜色
@mixin input-color($key, $value) {
    &.v--#{$key} {
        border-color: $value;
        &:not(.disabled):not([disabled]) {
            &:focus,
            &.focus {
                border-color: $value;
                box-shadow: 0 0 0 rem(3) rgba($value, .2);
            }
        }
    }
}

//radio主题颜色
@mixin radio-color($key, $value) {
    &.v--#{$key} >,
    &.v--#{$key} > input[type="radio"]:checked ~,
    &.v-tick.v--#{$key} >,
    &.v-tick-o.v--#{$key} > {
        .icon {
            border-color: $value;
        }  
    }
    &.v--#{$key} > input[type="radio"]:checked ~ .icon:after,
    &.v-tick.v--#{$key} > input[type="radio"]:checked ~ .icon {
        background-color: $value;
    }
    //勾选(实心)
    &.v-tick.v--#{$key} > input[type="radio"]:checked ~ .icon:after {
        //白色主题时勾为黑色透明
        @if $key == "white" {
            border: {
                left-color: rgba($--black, .7);
                bottom-color: rgba($--black, .7);
            }
        }
        @else {
            border: {
                left-color: $--white;
                bottom-color: $--white;
            }
        }
        background-color: $--tp;
    }
    //勾选(线条)
    &.v-tick-o.v--#{$key} > input[type="radio"]:checked ~ .icon:after {
        border-left-color: $value;
        border-bottom-color: $value;
        background-color: $--tp;
    }
    //白色主题时文字为白色
    @if $key == "white" {
        &.v--#{$key} > .text {
            color: $value;
        }
    }
}

//checkbox主题颜色
@mixin checkbox-color($key, $value) {
    &.v--#{$key} >,
    &.v--#{$key} > input[type="checkbox"]:checked ~,
    &.v-bedye.v--#{$key} > input[type="checkbox"]:checked ~,
    &.v-square.v--#{$key} > input[type="checkbox"]:checked ~ {
        .icon {
            border-color: $value;
        }
    }
    &.v--#{$key} > input[type="checkbox"]:checked ~ .icon:after {
        border: {
            left-color: $value;
            bottom-color: $value;
        }
    }
    //着色 && 方块
    &.v-bedye.v--#{$key} > input[type="checkbox"]:checked ~ .icon,
    &.v-square.v--#{$key} > input[type="checkbox"]:checked ~ .icon:after {
        background-color: $value;
    }
    &.v-bedye.v--#{$key} > input[type="checkbox"]:checked ~ .icon:after {
        //白色主题时勾为黑色透明
        @if $key == "white" {
            border: {
                left-color: rgba($--black, .7);
                bottom-color: rgba($--black, .7);
            }
        }
        @else {
            border: {
                left-color: $--white;
                bottom-color: $--white;
            }
        }
    }
    //白色主题时文字为白色
    @if $key == "white" {
        &.v--#{$key} > .text {
            color: $value;
        }
    }
}

//switch主题颜色
@mixin switch-color($key, $value) {
    @if $key == "white" {
        &.v--#{$key} {
            > .icon {
                border-color: $value;
                background-color: $--tp;

                &:before {
                    background-color: $--tp;
                }
                &:after {
                    box-shadow: 0 0 0 rem(1) $value, 0 rem(3) 0 rgba($--black, .1);
                }
            }
            > input:checked ~ .icon {
                border-color: $value;
                background-color: rgba($value, .2);
            }
            > .text {
                color: $value;
            }
        }
    }
    @else {
        &.v--#{$key} >,
        &.v--#{$key} > input:checked ~ {
            .icon {
                border-color: $value;
                background-color: $value;
            }
        }
        &.v--#{$key} > .icon:after {
            box-shadow: 0 0 0 rem(1) rgba($value, .5), 0 rem(3) 0 rgba($--black, .1);
        }
    }
}

//按钮主题颜色
@mixin button-color($key, $value) {
    &.v--#{$key}:not(.disabled):not([disabled]):not(.v-link),
    &.v-outline.v--#{$key}:not(.disabled):not([disabled]):not(.v-link):hover {
        color: nth($value, 4);
        border-color: nth($value, 1);
        background-color: nth($value, 1);
    }
    &.v--#{$key}:not(.disabled):not([disabled]):not(.v-link):hover {
        border-color: nth($value, 2);
        background-color: nth($value, 2);
    }
    &.v--#{$key}:not(.disabled):not([disabled]):not(.v-link):active,
    &.v--#{$key}:not(.disabled):not([disabled]):not(.v-link).active,
    &.v-outline.v--#{$key}:not(.disabled):not([disabled]):not(.v-link):active,
    &.v-outline.v--#{$key}:not(.disabled):not([disabled]):not(.v-link).active {
        border-color: nth($value, 3);
        background-color: nth($value, 3);
    }
    &.v--#{$key}:not(.disabled):not([disabled]):not(.v-link):focus,
    &.v--#{$key}:not(.disabled):not([disabled]):not(.v-link).focus,
    &.v-outline.v--#{$key}:not(.disabled):not([disabled]):not(.v-link):focus,
    &.v-outline.v--#{$key}:not(.disabled):not([disabled]):not(.v-link).focus {
        box-shadow: 0 0 0 rem(3) rgba(nth($value, 1), .2);
    }
    //轮廓线
    &.v-outline.v--#{$key}:not(.disabled):not([disabled]):not(.v-link) {
        color: nth($value, 1);
        border-color: nth($value, 1);
        background-color: $--tp;
    }
    //link
    &.v-link.v--#{$key}:not(.disabled):not([disabled]) {
        color: nth($value, 1);
    }
}

//tips主题颜色
@mixin tips-color($key, $value) {
    @if $key != 'dark' and $key != 'white' {
        &.v--#{$key}:after {
            background-color: rgba($value, .95);
        }
        &.v--#{$key}:before {
            border-color: transparent;
            border-top-color: rgba($value, .95);
        }
        &.v-bottom.v--#{$key}:before {
            border-color: transparent;
            border-bottom-color: rgba($value, .95);
        }
        &.v-left.v--#{$key}:before {
            border-color: transparent;
            border-left-color: rgba($value, .95);
        }
        &.v-right.v--#{$key}:before {
            border-color: transparent;
            border-right-color: rgba($value, .95);
        }
    }
}

//pages主题颜色
@mixin pages-color($key, $value) {
    @if $key != 'white' {
        &:not(.disabled):not([disabled]).active {
            &.v--#{$key} .v-link {
                color: $--white;
                background-color: $value;
                border-color: $value;
            }
        }
    }
}