@import '../../themes/css/index';
// 页面背景颜色
@mixin bg_color($color){/*通过该函数设置主题颜色，后期方便统一管理；*/
  background-color:$color;
  [data-theme="theme1"] & {
    background-color:$pageBgColor;
  }
  [data-theme="theme2"] & {
    background-color:$pageBgColor2;
  }
  [data-theme="theme3"] & {
    background-color:$pageBgColor3;
  }
  [data-theme="theme4"] & {
    background-color:$pageBgColor4;
  }
  //TODO:这里是为了尝试有没有更好方法，暂时没想到
  $index: [data-theme];
  $pageBgColor: $pageBgColor;
  //@if $index {
  //background-color: $pageBgColor2;
  //}
}
// 按钮背景颜色
@mixin button_bg_color($color){/*通过该函数设置主题颜色，后期方便统一管理；*/
  background-color:$color;
  [data-theme="theme1"] & {
    background-color:$btnBgColor;
  }
  [data-theme="theme2"] & {
    background-color:$btnBgColor2;
  }
  [data-theme="theme3"] & {
    background-color:$btnBgColor3;
  }
  [data-theme="theme4"] & {
    background-color:$btnBgColor4;
  }
}
// 定义下border边框
@mixin border-bottom($color) {
  border-bottom: 3px solid $color;
  [data-theme="theme1"] & {
    border-bottom: 3px solid $mainColor;
  }
  [data-theme="theme2"] & {
    border-bottom: 3px solid $mainColor2;
  }
  [data-theme="theme3"] & {
    border-bottom: 3px solid $mainColor3;
  }
  [data-theme="theme4"] & {
    border-bottom: 3px solid $mainColor4;
  }
}
// 按钮字体颜色
@mixin btn_text_color($color){/*通过该函数设置字体颜色，后期方便统一管理；*/
  color:$color;
  [data-theme="theme1"] & {
    color:$btnTextColor;
  }
  [data-theme="theme2"] & {
    color:$btnTextColor2;
  }
  [data-theme="theme3"] & {
    color:$btnTextColor3;
  }
  [data-theme="theme4"] & {
    color:$btnTextColor4;
  }
}

// 按钮字体颜色
@mixin user_tab_text_color($color){/*通过该函数设置字体颜色，后期方便统一管理；*/
  color:$color;
  [data-theme="theme1"] & {
    color:$user_tab_text_color;
  }
  [data-theme="theme2"] & {
    color:$user_tab_text_color2;
  }
  [data-theme="theme3"] & {
    color:$user_tab_text_color3;
  }
  [data-theme="theme4"] & {
    color:$user_tab_text_color4;
  }
}

// 任务墙按钮字体颜色
@mixin task_tab_text_color($color){/*通过该函数设置字体颜色，后期方便统一管理；*/
  color:$color;
  [data-theme="theme1"] & {
    color:$task_tab_text_color;
  }
  [data-theme="theme2"] & {
    color:$task_tab_text_color2;
  }
  [data-theme="theme3"] & {
    color:$task_tab_text_color3;
  }
  [data-theme="theme4"] & {
    color:$task_tab_text_color4;
  }
}

// 任务墙tab的背景选中
@mixin task_tab_active_bg_color($color){/*通过该函数设置字体颜色，后期方便统一管理；*/
  background-color: $color;
  [data-theme="theme1"] & {
    background-color:$task_tab_active_bg_color !important;
  }
  [data-theme="theme2"] & {
    background-color:$task_tab_active_bg_color2 !important;
  }
  [data-theme="theme3"] & {
    background-color:$task_tab_active_bg_color3 !important;
  }
  [data-theme="theme4"] & {
    background-color:$task_tab_active_bg_color4 !important;
  }
}

// 任务墙tab的右边框
@mixin task_tab_border_right_color($color){/*通过该函数设置字体颜色，后期方便统一管理；*/
  [data-theme="theme1"] & {
    border-right: $task_tab_border_right_color 3px solid;
  }
  [data-theme="theme2"] & {
    border-right: $task_tab_border_right_color2 3px solid;
  }
  [data-theme="theme3"] & {
    border-right: $task_tab_border_right_color3 3px solid;
  }
  [data-theme="theme4"] & {
    border-right: $task_tab_border_right_color4 3px solid;
  }
}

//// 按钮样式
@mixin button_style($bgcolor, $btbcolor){/*通过该函数设置主题颜色，后期方便统一管理；*/
  // 按钮背景颜色
  background-color:$bgcolor;
  [data-theme="theme1"] & {
    background-color:$btnBgColor;
  }
  [data-theme="theme2"] & {
    background-color:$btnBgColor2;
  }
  [data-theme="theme3"] & {
    background-color:$btnBgColor3;
  }
  [data-theme="theme4"] & {
    background-color:$btnBgColor4;
  }
  //主题边框颜色
  color:$btbcolor;
  [data-theme="theme1"] & {
    border: 2px solid $themeBorderColor;
  }
  [data-theme="theme2"] & {
    border: 2px solid $themeBorderColor2;
  }
  [data-theme="theme3"] & {
    border: 2px solid $themeBorderColor3;
  }
  [data-theme="theme4"] & {
    border: 2px solid $themeBorderColor4;
  }
}

// 主题边框颜色
@mixin button_border_color ($color) {
  border: 2px solid $color;
  [data-theme="theme1"] & {
    border: 2px solid $themeBorderColor;
  }
  [data-theme="theme2"] & {
    border: 2px solid $themeBorderColor2;
  }
  [data-theme="theme3"] & {
    border: 2px solid $themeBorderColor3;
  }
  [data-theme="theme4"] & {
    border: 2px solid $themeBorderColor4;
  }
}

// swiper下划线颜色
@mixin swiper_line_color ($color) {
  background-color:$color;
  [data-theme="theme1"] & {
    background-color:$swiperLine;
  }
  [data-theme="theme2"] & {
    background-color:$swiperLine2;
  }
  [data-theme="theme3"] & {
    background-color:$swiperLine3;
  }
  [data-theme="theme4"] & {
    background-color:$swiperLine4;
  }
}


// 详情说明字体的颜色
@mixin details_title_color ($color) {
  color:$color;
  [data-theme="theme1"] & {
    color:$detailsTitleColor;
  }
  [data-theme="theme2"] & {
    color:$detailsTitleColor2;
  }
  [data-theme="theme3"] & {
    color:$detailsTitleColor3;
  }
  [data-theme="theme4"] & {
    color:$detailsTitleColor4;
  }
}

// 详情说明字体的圆点颜色
@mixin details_circle_color ($color) {
  background-color:$color;
  [data-theme="theme1"] & {
    background-color:$detailsCircleColor;
  }
  [data-theme="theme2"] & {
    background-color:$detailsCircleColor2;
  }
  [data-theme="theme3"] & {
    background-color:$detailsCircleColor3;
  }
  [data-theme="theme4"] & {
    background-color:$detailsCircleColor4;
  }
}

// 邀请详情背景图片
@mixin details_bg_pic($url) {
  background:url($url) no-repeat 0 0;
  background-size: 100% 100%;
  [data-theme="theme1"] & {
    background:url($details_bg_url) no-repeat 0 0;
    background-size: 100% 100%;
  }
  [data-theme="theme2"] & {
    background:url($details_bg_url2) no-repeat 0 0;
    background-size: 100% 100%;
  }
  [data-theme="theme3"] & {
    background:url($details_bg_url3) no-repeat 0 0;
    background-size: 100% 100%;
  }
  [data-theme="theme4"] & {
    background:url($details_bg_url4) no-repeat 0 0;
    background-size: 100% 100%;
  }
}

// 邀请任务列表背景
@mixin invite_single_bg_pic($url) {
  background:url($url) no-repeat 0 0;
  background-size: 100% auto;
  [data-theme="theme1"] & {
    background:url($invite_single_bg_url) no-repeat 0 0;
  }
  [data-theme="theme2"] & {
    background:url($invite_single_bg_url2) no-repeat 0 0;
  }
  [data-theme="theme3"] & {
    background:url($invite_single_bg_url3) no-repeat 0 0;
  }
  [data-theme="theme4"] & {
    background:url($invite_single_bg_url4) no-repeat 0 0;
  }
}

// 邀请明细背景背景
@mixin invite_detail_title_bg_pic($url) {
  background:url($url) no-repeat 0 0;
  background-size: 100vw auto;
  [data-theme="theme1"] & {
    background:url($invite-detail-title-bg) no-repeat 0 0;
    background-size: 100vw auto;
  }
  [data-theme="theme2"] & {
    background:url($invite-detail-title-bg2) no-repeat 0 0;
    background-size: 100vw auto;
  }
  [data-theme="theme3"] & {
    background:url($invite-detail-title-bg3) no-repeat 0 0;
    background-size: 100vw auto;
  }
  [data-theme="theme4"] & {
    background:url($invite-detail-title-bg4) no-repeat 0 0;
    background-size: 100vw auto;
  }
}

// 按钮渐变样式
@mixin button_linear_gradient ($angle, $color1, $color2) {
  background:linear-gradient($angle, $color1, $color2);
  [data-theme="theme1"] & {
    background:linear-gradient($angle, $btn_linear_color_start, $btn_linear_color_end);
  }
  [data-theme="theme2"] & {
    background:linear-gradient($angle, $btn_linear_color_start2, $btn_linear_color_end2);
  }
  [data-theme="theme3"] & {
    background:linear-gradient($angle, $btn_linear_color_start3, $btn_linear_color_end3);
  }
  [data-theme="theme4"] & {
    background:linear-gradient($angle, $btn_linear_color_start4, $btn_linear_color_end4);
  }
}

// 登陆按钮颜色
@mixin login_btn_color ($color) {
  background: $color;
  [data-theme="theme1"] & {
    background: $login_btn_color;
  }
  [data-theme="theme2"] & {
    background: $login_btn_color2;
  }
  [data-theme="theme3"] & {
    background: $login_btn_color3;
  }
  [data-theme="theme4"] & {
    background: $login_btn_color4;
  }
}

// 下划线颜色
@mixin border_bottom_color ($color) {
  border-bottom: 2px $themeBorderColor solid;
  [data-theme="theme1"] & {
    border-bottom: 2px $themeBorderColor solid;
    //border-bottom: $themeBorderColor;
  }
  [data-theme="theme2"] & {
    border-bottom: 2px $themeBorderColor2 solid;
    //border-bottom: $themeBorderColor2;
  }
  [data-theme="theme3"] & {
    border-bottom: 2px $themeBorderColor3 solid;
    //border-bottom: $themeBorderColor2;
  }
  [data-theme="theme4"] & {
    border-bottom: 2px $themeBorderColor4 solid;
    //border-bottom: $themeBorderColor;
  }
}

// 个人中心背景样式
@mixin user-center_bg_pic($url) {
  background:url($url) no-repeat 0 0;
  background-size: 100vw auto;
  [data-theme="theme1"] & {
    background:url($user-center-bgs) no-repeat 0 0;
    background-size: 100% 100%;
  }
  [data-theme="theme2"] & {
    background:url($user-center-bgs2) no-repeat 0 0;
    background-size: 100% 100%;
  }
  [data-theme="theme3"] & {
    background:url($user-center-bgs3) no-repeat 0 0;
    background-size: 100% 100%;
  }
  [data-theme="theme4"] & {
    background:url($user-center-bgs4) no-repeat 0 0;
    background-size: 100% 100%;
  }
}

// 任务墙tab的背景
@mixin task_tab_bg_color($color) {
  background: $color;
  [data-theme="theme1"] & {
    background: $task_tab_bg_color;
  }
  [data-theme="theme2"] & {
    background: $task_tab_bg_color2;
  }
  [data-theme="theme3"] & {
    background: $task_tab_bg_color3;
  }
  [data-theme="theme4"] & {
    background: $task_tab_bg_color4;
  }
}
