@mixin set-color($name, $level: '') {
  $length: str-length($level);
  @if $length == 1 or $length == 2 {
    #{$name}: #{'#' + $level + $level + $level} !important;
  } @else if $length == 3 or $length == 6 {
    #{$name}: #{'#' + $level} !important;
  } @else if $length == 0 {
    #{$name}: transparent !important;
  } @else {
    #{$name}: #{'#' + $level} !important;
  }
}
@mixin set-theme-color($name, $level: '') {
  @if $level == '' {
    #{$name}: var(--theme-color) !important;
  } @else {
    #{$name}: var(--theme-color-#{$level}) !important;
  }
}
@mixin set-foreground-color($name, $level: '') {
  @if $level == '' {
    #{$name}: var(--foreground-color) !important;
  } @else {
    #{$name}: var(--foreground-color-#{$level}) !important;
  }
}
@mixin background-color($level: '') {
  @include set-color('background-color', $level);
}
@mixin color($level: '') {
  @include set-color('color', $level);
}
@mixin background($level: '') {
  @include set-color('background', $level);
}
@mixin border-color($level: '') {
  @include set-color('border-color', $level);
}
@mixin fill($level: '') {
  @include set-color('fill', $level);
}
@mixin stroke($level: '') {
  @include set-color('stroke', $level);
}

@mixin theme-background-color($level: '') {
  @include set-theme-color('background-color', $level);
}
@mixin theme-color($level: '') {
  @include set-theme-color('color', $level);
}
@mixin theme-background($level: '') {
  @include set-theme-color('background', $level);
}
@mixin theme-border-color($level: '') {
  @include set-theme-color('border-color', $level);
}
@mixin theme-fill($level: '') {
  @include set-theme-color('fill', $level);
}
@mixin theme-stroke($level: '') {
  @include set-theme-color('stroke', $level);
}

$vip-color: 'FB7299';

@mixin vip-color() {
  @include set-color('color', $vip-color);
}
@mixin vip-background-color() {
  @include set-color('background-color', $vip-color);
}

@mixin foreground-background-color($level: '') {
  @include set-foreground-color('background-color', $level);
}
@mixin foreground-color($level: '') {
  @include set-foreground-color('color', $level);
}
@mixin foreground-background($level: '') {
  @include set-foreground-color('background', $level);
}
@mixin foreground-border-color($level: '') {
  @include set-foreground-color('border-color', $level);
}
@mixin foreground-fill($level: '') {
  @include set-foreground-color('fill', $level);
}
@mixin foreground-stroke($level: '') {
  @include set-foreground-color('stroke', $level);
}

@mixin to-white {
  filter: brightness(0) invert(1) !important;
}
@mixin to-gray($invert: 0.666) {
  filter: brightness(0) invert($invert) !important;
}
@mixin grayscale($value: 1) {
  filter: grayscale($value) !important;
}
@mixin brightness($value: 1) {
  filter: brightness($value) !important;
}
@mixin to-theme($from) {
  filter: var(--#{$from}-image-filter) !important;
}
@mixin no-image {
  background-image: none !important;
}
@mixin no-shadow {
  box-shadow: none !important;
}
@mixin theme-shadow($lighter: true) {
  @if $lighter {
    box-shadow: 0px 1px 10px 0px var(--theme-color-30) !important;
  } @else {
    box-shadow: 0px 4px 16px 0px var(--theme-color-40) !important;
  }
}
@mixin hide($hideLayout: true) {
  @if $hideLayout {
    display: none !important;
  } @else {
    visibility: hidden !important;
  }
}

@mixin back-top-btn($btn-selector: '.back-top-btn', $arrow-selector: '.arrow-icon') {
  #{$btn-selector} {
    @include border-color();
    @include background-color('3');
    @if $arrow-selector {
      #{$arrow-selector} {
        @include color('a');
      }
    }
    &:hover {
      @include theme-background-color();
      @if $arrow-selector {
        #{$arrow-selector} {
          @include foreground-color();
        }
      }
    }
  }
}
@function contains($class) {
  @return "[class*='#{$class}']";
}