$text: #ffffff;
$text-active: #1678ff;
$text-gray: #72709e;

$page: #000223;
$area: #1b1844;
$area-l: #272b55;
$select: #272b55;
$dialog: #272b55;
$mask: rgba(0, 0, 0, 0.8);
$image: rgba(0, 0, 0, 0.8);
$image-lg: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
$gold-lg: linear-gradient(to right, #e9cfc9, #f6e2dd);

// mixin/color.scss
$border: #27243d;
$active: #1678ff;
$active-lg: linear-gradient(to right, #1678ff, #abbaf0);
$cancel: #201c54;
$confirm: #1678ff;
// mixin/color.scss

$names-c: text, text-active, text-gray;
$colors-c: $text, $text-active, $text-gray;

$names-bgc: page, area, area-l, select, dialog, mask, image;
$colors-bgc: $page, $area, $area-l, $select, $dialog, $mask, $image;

$names-lg: image-lg, gold-lg;
$colors-lg: $image-lg, $gold-lg;

.se {
  &-c {
    @each $name in $names-c {
      $i: index($names-c, $name);
      &-#{$name} {
        color: nth($colors-c, $i);
      }
    }
  }

  &-bgc {
    @each $name in $names-bgc {
      $i: index($names-bgc, $name);
      &-#{$name} {
        background-color: nth($colors-bgc, $i);
      }
    }

    @each $name in $names-lg {
      $i: index($names-lg, $name);
      &-#{$name} {
        background-image: nth($colors-lg, $i);
      }
    }
  }
}