// text classes
$colors: primary,
success,
warning,
danger,
dark;

@each $color in $colors {
  .#{$color} {
    color: rgba(var(--vs-#{$color}), 1) !important;
  }

  .text-#{$color} {
    color: rgba(var(--vs-#{$color}), 1) !important;
  }

  .bg-#{$color} {
    background-color: rgba(var(--vs-#{$color}), 1);
  }
}

.bg-primary-gradient {
  background: linear-gradient(118deg, rgba(var(--vs-primary), 1), rgba(var(--vs-primary), .7)) !important;
}

.bg-gray-150 {
  background-color: $bg-gray-150;
}

.bg-gray-250 {
  background-color: $bg-gray-250;
}

.base-shadow {
  box-shadow: $base-shadow;
}

.light-shadow {
  box-shadow: $light-shadow;
}

.heavy-shadow {
  box-shadow: $heavy-shadow;
}

.m-radius {
  border-radius: $medium-radius;
}

.radius {
  border-radius: $large-radius;
}

.flex-row-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-col-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.transition {
  transition: $transition;
}

.quickly {
  animation-duration: 0.2s !important;
}