/* Mixins */
/*
  use: @include clearfix;
*/
@mixin clearfix {
  &:after {
    content: '';
    display: table;
    clear: both;
  }
}

/*
*/
// Browser Prefixes
@mixin transform($transforms) {
  transform: $transforms;
}
// Rotate
@mixin rotate($deg) {
  @include transform(rotate(#{$deg}deg));
}
// Scale
@mixin scale($scale) {
  @include transform(scale($scale));
}
// Translate
@mixin translate($x, $y) {
  @include transform(translate($x, $y));
}
// Skew
@mixin skew($x, $y) {
  @include transform(skew(#{$x}deg, #{$y}deg));
}
// Transform Origin
@mixin transform-origin($origin) {
  transform-origin: $origin;
}

/* 渐变 */
@mixin bg-gradient-primary {
  background-image: linear-gradient(310deg, #ff0080, var(--q-primary));
}

@mixin bg-gradient-secondary {
  background-image: linear-gradient(310deg, #627594, #a8b8d8);
}

@mixin bg-gradient-success {
  background-image: linear-gradient(310deg, #17ad37, #98ec2d);
}

@mixin bg-gradient-info {
  background-image: linear-gradient(310deg, #2152ff, #21d4fd);
}

@mixin bg-gradient-warning {
  background-image: linear-gradient(310deg, #f53939, #fbcf33);
}

@mixin bg-gradient-danger {
  background-image: linear-gradient(310deg, #ea0606, #ff667c);
}

@mixin bg-gradient-light {
  background-image: linear-gradient(310deg, #ced4da, #ebeff4);
}

@mixin bg-gradient-dark {
  background-image: linear-gradient(310deg, #141727, #3a416f);
}

@mixin bg-gradient-faded-primary {
  background-image: radial-gradient(370px circle at 80% 50%, rgba(203, 12, 159, 0.6) 0, var(--q-primary) 100%);
}

@mixin bg-gradient-faded-secondary {
  background-image: radial-gradient(370px circle at 80% 50%, rgba(131, 146, 171, 0.6) 0, #657796 100%);
}

@mixin bg-gradient-faded-success {
  background-image: radial-gradient(370px circle at 80% 50%, #f0f9eb 0, var(--my-label-success-green) 100%);
}

@mixin bg-gradient-faded-info {
  background-image: radial-gradient(370px circle at 80% 50%, rgba(23, 193, 232, 0.6) 0, #129aba 100%);
}

@mixin bg-gradient-faded-warning {
  background-image: radial-gradient(370px circle at 80% 50%, #fdf6ec 0, var(--my-label-warn-yellow) 100%);
}

@mixin bg-gradient-faded-danger {
  background-image: radial-gradient(370px circle at 80% 50%, #fef0f0 0, var(--my-label-error-red) 100%);
}

@mixin bg-gradient-faded-light {
  background-image: radial-gradient(370px circle at 80% 50%, rgba(233, 236, 239, 0.6) 0, #cbd3da 100%);
}

@mixin bg-gradient-faded-dark {
  background-image: radial-gradient(370px circle at 80% 50%, rgba(52, 71, 103, 0.6) 0, #233045 100%);
}

@mixin bg-gradient-faded-white {
  background-image: radial-gradient(370px circle at 80% 50%, hsla(0, 0%, 100%, 0.6) 0, #e6e6e6 100%);
}

@mixin bg-gradient-faded-primary-vertical {
  background-image: radial-gradient(200px circle at 50% 70%, rgba(203, 12, 159, 0.3) 0, #cb0c9f 100%);
}

@mixin bg-gradient-faded-secondary-vertical {
  background-image: radial-gradient(200px circle at 50% 70%, rgba(131, 146, 171, 0.3) 0, #8392ab 100%);
}

@mixin bg-gradient-faded-success-vertical {
  background-image: radial-gradient(200px circle at 50% 70%, rgba(130, 214, 22, 0.3) 0, #82d616 100%);
}

@mixin bg-gradient-faded-info-vertical {
  background-image: radial-gradient(200px circle at 50% 70%, rgba(23, 193, 232, 0.3) 0, #17c1e8 100%);
}

@mixin bg-gradient-faded-warning-vertical {
  background-image: radial-gradient(200px circle at 50% 70%, rgba(251, 207, 51, 0.3) 0, #fbcf33 100%);
}

@mixin bg-gradient-faded-danger-vertical {
  background-image: radial-gradient(200px circle at 50% 70%, rgba(234, 6, 6, 0.3) 0, #ea0606 100%);
}

@mixin bg-gradient-faded-light-vertical {
  background-image: radial-gradient(200px circle at 50% 70%, rgba(233, 236, 239, 0.3) 0, var(--my-grey-9) 100%);
}

@mixin bg-gradient-faded-dark-vertical {
  background-image: radial-gradient(200px circle at 50% 70%, rgba(52, 71, 103, 0.3) 0, #344767 100%);
}

@mixin bg-gradient-faded-white-vertical {
  background-image: radial-gradient(200px circle at 50% 70%, hsla(0, 0%, 100%, 0.3) 0, #fff 100%);
}