@import "var-list";
html {
  --activityColor: #0081ff;
  --activityColorHover: #3298ff;
}
.light {
  --theme-name: 'light';
  --nav-color: #000;
  --nav-bg-color: #f9f9fa;
  --nav-bg-color-active: var(--activityColor);
  --scrollbar-bg-color: var(--main-bg-color);
  --scrollbar-color: rgba(0, 0, 0, 0.5);
  --scrollbar-color-hover: rgba(0, 0, 0, 0.6);
  --scrollbar-color-active: rgba(0, 0, 0, 0.8);
  @each $v in $category-list {
    --nav-icon-#{$v}: url('/assets/icons/light/#{$v}.svg'),
    url('/assets/icons/#{$v}_active.svg');
  }
  --main-color: black;
  --main-bg-color: white;
  --main-title-hr-color: rgba(0,
  0,
  0,
  0.15);
  --main-item-hr-color: rgba(0,
  0,
  0,
  0.1);
  --main-item-bg-color-hover: rgba(0,
  0,
  0,
  0.05);
  --font-color: #303030;
  --font-color-gray: rgb(150,
  150,
  150);
  --tab-bg-color: #efefef;
  --tab-border-color: #e3e3e3;
  --primary-color: #199ff3;
  --list-hover-color: #fcfcfc;
  --list-hover-border-color: #f1f1f1;
  --tips_bg: url('/assets/icons/light/tips_bg.svg');
  --select-icon: url('/assets/icons/light/select.svg');
  --start-icon: url('/assets/buttons/light/start.svg');
  --pause-icon: url('/assets/buttons/light/pause.svg');
  --down-icon: url('/assets/buttons/light/down_normal.svg'),
  url('/assets/buttons/light/down_hover.svg'),
  url('/assets/buttons/light/down_press.svg');
  --random-icon: url('/assets/buttons/light/random_normal.svg'),
  url('/assets/buttons/light/random_hover.svg'),
  url('/assets/buttons/light/random_press.svg');
  --dialog-close-icon: url('/assets/buttons/light/close_light.svg');
  --checkbox-disabled-icon: url('/assets/buttons/light/checkbox-checked-insensitive.svg');
  --checkbox-button-icon: url('/assets/buttons/light/checkbox-unchecked.svg'),
  url('/assets/buttons/light/checkbox-unchecked-hover.svg'),
  url('/assets/buttons/light/checkbox-unchecked-press.svg');
  --checkbox-button-checked-icon: url('/assets/buttons/light/checkbox-checked.svg'),
  url('/assets/buttons/light/checkbox-checked-hover.svg'),
  url('/assets/buttons/light/checkbox-checked-press.svg');
  --wechat-icon: url('/assets/icons/light/wechat.svg');
  --alipay-icon: url('/assets/icons/light/alipay.svg');
  --paypal-icon: url('/assets/icons/light/paypal.svg');
  --wechatpay-icon: url('/assets/icons/light/wechatpay.svg');
  --checkboxnormal-icon: url('/assets/images/checkbox-normal.svg');
  --checkboxselect-icon: url('/assets/images/checkbox-select.svg');
  --screen-icon: url('/assets/icons/light/screen-icon.svg');
  --safe-icon: url('/assets/images/safe.svg');
  @each $v in $control-button {
    --control-icon-#{$v}: url('/assets/buttons/light/#{$v}_normal.svg'),
    url('/assets/buttons/light/#{$v}_hover.svg'),
    url('/assets/buttons/light/#{$v}_press.svg'),
    url('/assets/buttons/light/#{$v}_insensitive.svg');
  }
  button {
    position: relative;
    color: white;
    background: linear-gradient(180deg, var(--activityColorHover) 0%, var(--activityColor) 100%);
    box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.05), 0px 2px 0px 0px rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    &:enabled {
      &:hover,
      &.hover {
        color: rgba(255, 255, 255, 0.8);
      }
      &:active,
      &.active {
        &:after {
          display: block;
          background: rgba(0, 0, 0, 0.1);
          content: ' ';
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
        }
      }
    }
    &:disabled,
    &.disabled {
      background: #e6e6e6;
      cursor: not-allowed;
    }
    &.primary {
      font-weight: 500;
      //border: 1px solid rgba(29, 130, 255, 0.3);
      &:hover:enabled {
        background: var(--activityColorHover);
      }
    }
    &.default {
      background: #fff;
      color: var(--main-color);
      border: 1px solid var(--tab-border-color);
      &:hover {
        color: var(--main-color);
        background: var(--nav-bg-color);
      }
    }
    &.plain {
      background: #fff;
      color: var(--primary-color);
      border: 1px solid var(--primary-color);
      &:hover {
        background: #efefef;
        color: var(--primary-color);
      }
    }
    &.secondary:enabled {
      &:not(:hover):not(:active) {
        color: black;
        background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(253, 253, 253, 1) 100%);
        border: 1px solid rgba(0, 0, 0, 0.08);
      }
    }
    &.toolTip {
      .toolTip_content {
        color: black;
        background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(253, 253, 253, 1) 100%);
        border: 1px solid rgba(0, 0, 0, 0.08);
      }
    }
  }
  .___button {
    background-color: white;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(0, 0, 0, 0.02);
    color: rgba(48, 48, 48, 1);
    &.primary {
      color: var(--activityColor);
      font-weight: 500;
      //box-shadow: inset 0 0 0 1px rgba(0, 132, 255, 0.4);
    }
    &.control {
      color: white;
      background-image: linear-gradient(to bottom, var(--activityColorHover), var(--activityColor));
    }
    &:not(:disabled) {
      &:hover {
        //color: white;
        background-image: linear-gradient(to bottom, var(--activityColorHover), var(--activityColor));
      }
      &:active,
      &.active {
        //color: white;
        background-image: linear-gradient(to bottom, var(--activityColor), var(--activityColorHover));
      }
    }
    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }
  select {
    background-color: white;
  }
}

.dark {
  --theme-name: 'dark';
  color: var(--main-color);
  background-color: var(--main-bg-color);
  //filter: brightness(85%);
  --scrollbar-bg-color: #1c1c1c;
  --scrollbar-color: rgba(255, 255, 255, 0.1);
  --scrollbar-color-hover: rgba(255, 255, 255, 0.2);
  --scrollbar-color-active: rgba(255, 255, 255, 0.3);
  --nav-color: #afafaf;
  --nav-bg-color: #252525;
  --nav-bg-color-active: var(--activityColor);
  --main-color: rgba(255, 255, 255, 0.8);
  --main-bg-color: #212121;
  --main-title-hr-color: #e5e5e5;
  --main-item-hr-color: rgba(255, 255, 255, 0.05);
  --main-item-bg-color-hover: rgba(255, 255, 255, 0.05);
  --font-color: #cccccc;
  --font-color-gray: #aaa;
  --tab-bg-color: #636363;
  --primary-color: rgba(65, 65, 65, 0.8);
  --list-hover-color: #474747;
  --list-hover-border-color: #747474;
  --tips_bg: url('/assets/icons/dark/tips_bg.svg');
  --select-icon: url('/assets/icons/dark/select.svg');
  --start-icon: url('/assets/buttons/dark/start.svg');
  --pause-icon: url('/assets/buttons/dark/pause.svg');
  --down-icon: url('/assets/buttons/dark/down_normal.svg'), url('/assets/buttons/dark/down_hover.svg'), url('/assets/buttons/dark/down_press.svg');
  --random-icon: url('/assets/buttons/dark/random_normal.svg'), url('/assets/buttons/dark/random_hover.svg'), url('/assets/buttons/dark/random_press.svg');
  --dialog-close-icon: url('/assets/buttons/dark/close_dark.svg');
  --checkbox-disabled-icon: url('/assets/buttons/dark/checkbox-checked-insensitive.svg');
  --checkbox-button-icon: url('/assets/buttons/dark/checkbox-unchecked.svg'), url('/assets/buttons/dark/checkbox-unchecked-hover.svg'), url('/assets/buttons/dark/checkbox-unchecked-press.svg');
  --checkbox-button-checked-icon: url('/assets/buttons/dark/checkbox-checked.svg'), url('/assets/buttons/dark/checkbox-checked-hover.svg'), url('/assets/buttons/dark/checkbox-checked-press.svg');
  --wechat-icon: url('/assets/icons/dark/wechat.svg');
  --alipay-icon: url('/assets/icons/dark/alipay.svg');
  --paypal-icon: url('/assets/icons/dark/paypal.svg');
  --screen-icon: url('/assets/icons/dark/screen-icon.svg');
  --wechatpay-icon: url('/assets/icons/light/wechatpay.svg');
  //   --checkboxnormal-icon: url('/assets/images/checkbox-normal.svg');
  --checkboxselect-icon: url('/assets/images/checkbox-select.svg');
  --safe-icon: url('/assets/images/safe.svg');
  @each $v in $category-list {
    --nav-icon-#{$v}: url('/assets/icons/dark/#{$v}.svg'),
    url('/assets/icons/#{$v}_active.svg');
  }
  @each $v in $control-button {
    --control-icon-#{$v}: url('/assets/buttons/dark/#{$v}_normal.svg'),
    url('/assets/buttons/dark/#{$v}_hover.svg'),
    url('/assets/buttons/dark/#{$v}_press.svg'),
    url('/assets/buttons/dark/#{$v}_insensitive.svg');
  }
  button {
    color: #e9e9e9;
    background: linear-gradient(180deg, var(--activityColorHover) 0%, var(--activityColor) 100%);
    position: relative;
    &.control {
      color: #e9e9e9;
    }
    &:active:enabled,
    &.active:enabled {
      color: var(--activityColor);
      background: #363636;
    }
    &:disabled {
      color: #5e5e5e;
      background: #2d2d2d;
      cursor: not-allowed;
      &:hover {
        color: #e9e9e9;
        background: #636363;
      }
    }
    &.default {
      background: #5e5e5e;
      color: var(--main-color);
      border: 1px solid var(--tab-border-color);
      &:hover:enabled {
        color: #fff;
      }
    }
    &.primary {
      &:hover:enabled {
        background: var(--activityColorHover);
      }
    }
    &.toolTip {
      .toolTip_content {
        color: white;
        background: black;
        border: 1px solid rgba(0, 0, 0, 0.08);
      }
    }
  }
  
  input,
  textarea,
  select {
    color: gray;
    background-color: var(--main-title-hr-color);
  }
}