//#region Base styles
@mixin primary {
  background: var(--color-primary);
  color: var(--color-primary-text);
}
@mixin secondary {
  background: var(--color-secondary);
  color: var(--color-secondary-text);
}
@mixin dark {
  background: var(--color-dark);
  color: var(--color-dark-text);
}
@mixin light {
  background: var(--color-light);
  color: var(--color-light-text);
}
@mixin base_classes {
  &.style-primary { @include primary; }
  &.style-secondary { @include secondary; }
  &.style-dark { @include dark; }
  &.style-light { @include light; }
}
//#endregion

//#region Outline styles
@mixin create_outline($outline_color, $text_color) {
  background: transparent;
  border: var(--border-thickness) solid $outline_color;
  color: $text_color;
}
@mixin outline-primary {
  @include create_outline(var(--color-primary), var(--color-white-text));
}
@mixin outline-secondary {
  @include create_outline(var(--color-secondary), var(--color-secondary));
}
@mixin outline-dark {
  @include create_outline(var(--color-dark), var(--color-dark));
}
@mixin outline-light {
  @include create_outline(var(--color-light), var(--color-light));
}
@mixin outline_classes {
  &.style-outline-primary { @include outline-primary; }
  &.style-outline-secondary { @include outline-secondary; }
  &.style-outline-dark { @include outline-dark; }
  &.style-outline-light { @include outline-light; }
}
//#endregion

// All styles classes
@mixin all_classes {
  @include base_classes;
  @include outline_classes;
}