/*! purgecss start ignore */
/*********************************************************
 *           Mobius Background Utility
 *
 * - with css        houdini: registerProperty(--start-color, --end-color),
 * - with global     control: none,
 * - use  global     params : --light-source-angle-current,
 *                            --dark-color-normal, --light-color-normal, --cigaret-color-normal, --mobius-color-normal,
 * - set  global     params : none,
 * - use  transition params : --transition-property-common, --transition-duration-normal,
 * - use  theme      props  : --bg-color-darker-m, --bg-color-lighter-m,
 * - release         props  : none,
 *
 * - usage: none,
 *
 * - classes: .mobius-bg-transparent(hover, active),
 *            .mobius-bg-concave(hover, active), .mobius-bg-convex(hover, active),
 *            .mobius-bg-normal(hover, active), .mobius-bg-primary(hover, active),
 *            .mobius-bg-light(hover, active), .mobius-bg-dark(hover, active), .mobius-bg-cigaret(hover, active), .mobius-bg-mobius(hover, active),
 *
 * !important transition-property
 *
 *********************************************************/

/* erase bg utility */
.mobius-bg--transparent,
.hover_mobius-bg--transparent:hover,
.active_mobius-bg--transparent:active {
  background: transparent;
}

/* adjust to theme */
%bglinear-color {
  --bglinear-color-dark: var(--bg-color-darker-m);
  --bglinear-color-light: var(--bg-color-lighter-m);
}
%bg-linear {
  background: linear-gradient(
    var(--lightsource-angle-current),
    var(--start-color),
    var(--end-color)
  );
}
%bg-transition {
  transition-property: var(--transition-property-common), --start-color,
    --end-color !important;
  transition-duration: var(--transition-duration-normal);
}
.mobius-bg--concave,
.hover_mobius-bg--concave:hover,
.active_mobius-bg--concave:active {
  @extend %bg-linear, %bglinear-color, %bg-transition;
  --start-color: var(--bglinear-color-dark);
  --end-color: var(--bglinear-color-light);
}
.mobius-bg--convex,
.hover_mobius-bg--convex:hover,
.active_mobius-bg--convex:active {
  @extend %bg-linear, %bglinear-color, %bg-transition;
  --start-color: var(--bglinear-color-light);
  --end-color: var(--bglinear-color-dark);
}

.mobius-bg--normal,
.hover_mobius-bg--normal:hover,
.active_mobius-bg--normal:active {
  background-color: var(--bg-color-normal);
  &.mobius-bg--concave,
  &.hover_mobius-bg--concave:hover,
  &.active_mobius-bg--concave:active,
  &.mobius-bg--convex,
  &.hover_mobius-bg--convex:hover,
  &.active_mobius-bg--convex:active {
    --bglinear-color-dark: var(--bg-color-darker-m);
    --bglinear-color-light: var(--bg-color-lighter-m);
  }
}

/* normal bg utility */
.mobius-bg--light,
.hover_mobius-bg--light:hover,
.active_mobius-bg--light:active {
  background-color: var(--light-color-normal);
  &.mobius-bg--concave,
  &.hover_mobius-bg--concave:hover,
  &.active_mobius-bg--concave:active,
  &.mobius-bg--convex,
  &.hover_mobius-bg--convex:hover,
  &.active_mobius-bg--convex:active {
    --bglinear-color-dark: var(--light-color-darker-m);
    --bglinear-color-light: var(--light-color-lighter-m);
  }
}
.mobius-bg--dark,
.hover_mobius-bg--dark:hover,
.active_mobius-bg--dark:active {
  background-color: var(--dark-color-normal);
  &.mobius-bg--concave,
  &.hover_mobius-bg--concave:hover,
  &.active_mobius-bg--concave:active,
  &.mobius-bg--convex,
  &.hover_mobius-bg--convex:hover,
  &.active_mobius-bg--convex:active {
    --bglinear-color-dark: var(--dark-color-darker-m);
    --bglinear-color-light: var(--dark-color-lighter-m);
  }
}
.mobius-bg--cigaret,
.hover_mobius-bg--cigaret:hover,
.active_mobius-bg--cigaret:active {
  background-color: var(--cigaret-color-normal);
  &.mobius-bg--concave,
  &.hover_mobius-bg--concave:hover,
  &.active_mobius-bg--concave:active,
  &.mobius-bg--convex,
  &.hover_mobius-bg--convex:hover,
  &.active_mobius-bg--convex:active {
    --bglinear-color-dark: var(--cigaret-color-darker-m);
    --bglinear-color-light: var(--cigaret-color-lighter-m);
  }
}
.mobius-bg--mobius,
.hover_mobius-bg--mobius:hover,
.active_mobius-bg--mobius:active {
  background-color: var(--mobius-color-normal);
  &.mobius-bg--concave,
  &.hover_mobius-bg--concave:hover,
  &.active_mobius-bg--concave:active,
  &.mobius-bg--convex,
  &.hover_mobius-bg--convex:hover,
  &.active_mobius-bg--convex:active {
    --bglinear-color-dark: var(--mobius-color-darker-m);
    --bglinear-color-light: var(--mobius-color-lighter-m);
  }
}

/*********************************************************
 *                       Background
 *********************************************************/

.mobius-bg--base,
.hover_mobius-bg--base:hover,
.active_mobius-bg--base:active { background-color: var(--bg-color-base); }
.mobius-bg--primary,
.hover_mobius-bg--primary:hover,
.active_mobius-bg--primary:active { background-color: var(--bg-color-primary); }
.mobius-bg--second,
.hover_mobius-bg--second:hover,
.active_mobius-bg--second:active { background-color: var(--bg-color-second); }
.mobius-bg--third,
.hover_mobius-bg--third:hover,
.active_mobius-bg--third:active { background-color: var(--bg-color-third); }

.mobius-bg--red,
.hover_mobius-bg--red:hover,
.active_mobius-bg--red:active { background-color: var(--bg-color-red); }
.mobius-bg--ry,
.hover_mobius-bg--ry:hover,
.active_mobius-bg--ry:active { background-color: var(--bg-color-ry); }
.mobius-bg--yellow,
.hover_mobius-bg--yellow:hover,
.active_mobius-bg--yellow:active { background-color: var(--bg-color-yellow); }
.mobius-bg--yg,
.hover_mobius-bg--yg:hover,
.active_mobius-bg--yg:active { background-color: var(--bg-color-yg); }
.mobius-bg--green,
.hover_mobius-bg--green:hover,
.active_mobius-bg--green:active { background-color: var(--bg-color-green); }
.mobius-bg--gc,
.hover_mobius-bg--gc:hover,
.active_mobius-bg--gc:active { background-color: var(--bg-color-gc); }
.mobius-bg--cyan,
.hover_mobius-bg--cyan:hover,
.active_mobius-bg--cyan:active { background-color: var(--bg-color-cyan); }
.mobius-bg--cb,
.hover_mobius-bg--cb:hover,
.active_mobius-bg--cb:active { background-color: var(--bg-color-cb); }
.mobius-bg--blue,
.hover_mobius-bg--blue:hover,
.active_mobius-bg--blue:active { background-color: var(--bg-color-blue); }
.mobius-bg--bm,
.hover_mobius-bg--bm:hover,
.active_mobius-bg--bm:active { background-color: var(--bg-color-bm); }
.mobius-bg--magenta,
.hover_mobius-bg--magenta:hover,
.active_mobius-bg--magenta:active { background-color: var(--bg-color-magenta); }
.mobius-bg--mr,
.hover_mobius-bg--mr:hover,
.active_mobius-bg--mr:active { background-color: var(--bg-color-mr); }

/*********************************************************
 *                   Background Color
 *********************************************************/

.mobius-bgc--white,
.hover_mobius-bgc--white:hover,
.active_mobius-bgc--white:active {
  background-color: var(--white-color-normal);
}
.mobius-bgc--gray,
.hover_mobius-bgc--gray:hover,
.active_mobius-bgc--gray:active {
  background-color: var(--gray-color-normal);
}
.mobius-bgc--black,
.hover_mobius-bgc--black:hover,
.active_mobius-bgc--black:active {
  background-color: var(--black-color-normal);
}

.mobius-bgc--dark,
.hover_mobius-bgc--dark:hover,
.active_mobius-bgc--dark:active {
  background-color: var(--dark-color-normal);
}
.mobius-bgc--light,
.hover_mobius-bgc--light:hover,
.active_mobius-bgc--light:active {
  background-color: var(--light-color-normal);
}
.mobius-bgc--cigaret,
.hover_mobius-bgc--cigaret:hover,
.active_mobius-bgc--cigaret:active {
  background-color: var(--cigaret-color-normal);
}
.mobius-bgc--mobius,
.hover_mobius-bgc--mobius:hover,
.active_mobius-bgc--mobius:active {
  background-color: var(--mobius-color-normal);
}

.mobius-bgc--red,
.hover_mobius-bgc--red:hover,
.active_mobius-bgc--red:active {
  background-color: var(--red-color-normal);
}
.mobius-bgc--ry,
.hover_mobius-bgc--ry:hover,
.active_mobius-bgc--ry:active {
  background-color: var(--ry-color-normal);
}
.mobius-bgc--yellow,
.hover_mobius-bgc--yellow:hover,
.active_mobius-bgc--yellow:active {
  background-color: var(--yellow-color-normal);
}
.mobius-bgc--yg,
.hover_mobius-bgc--yg:hover,
.active_mobius-bgc--yg:active {
  background-color: var(--yg-color-normal);
}
.mobius-bgc--green,
.hover_mobius-bgc--green:hover,
.active_mobius-bgc--green:active {
  background-color: var(--green-color-normal);
}
.mobius-bgc--gc,
.hover_mobius-bgc--gc:hover,
.active_mobius-bgc--gc:active {
  background-color: var(--gc-color-normal);
}
.mobius-bgc--cyan,
.hover_mobius-bgc--cyan:hover,
.active_mobius-bgc--cyan:active {
  background-color: var(--cyan-color-normal);
}
.mobius-bgc--cb,
.hover_mobius-bgc--cb:hover,
.active_mobius-bgc--cb:active {
  background-color: var(--cb-color-normal);
}
.mobius-bgc--blue,
.hover_mobius-bgc--blue:hover,
.active_mobius-bgc--blue:active {
  background-color: var(--blue-color-normal);
}
.mobius-bgc--bm,
.hover_mobius-bgc--bm:hover,
.active_mobius-bgc--bm:active {
  background-color: var(--bm-color-normal);
}
.mobius-bgc--magenta,
.hover_mobius-bgc--magenta:hover,
.active_mobius-bgc--magenta:active {
  background-color: var(--magenta-color-normal);
}
.mobius-bgc--mr,
.hover_mobius-bgc--mr:hover,
.active_mobius-bgc--mr:active {
  background-color: var(--mr-color-normal);
}

/*! purgecss end ignore */