@mixin turquoise-color { color: $turquoise; }
@mixin petroleum-color { color: $petroleum; }
@mixin dark_petroleum-color { color: $dark_petroleum; }
@mixin anthracite-color { color: $anthracite; }
@mixin dark_anthracite-color { color: $dark_anthracite; }
@mixin cancel-color { color: $cancel; }
@mixin white-color { color: $white; }
@mixin light_petroleum-color { color: $light-petroleum; }
@mixin light_blue-color { color: $light_blue; }
@mixin light_grey-color { color: $light_grey; }
@mixin disabled-color { color: $disabled; }


@mixin white-background { background: $white; }
@mixin turquoise-background { background: $turquoise; }
@mixin petroleum-background { background: $petroleum; }
@mixin dark_petroleum-background { background: $dark_petroleum; }
@mixin anthracite-background { background: $anthracite; }
@mixin dark_anthracite-background { background: $dark_anthracite; }
@mixin cancel-background { background: $cancel; }
@mixin disabled-background { background: $disabled; }
@mixin no-background { background: none; }

@mixin dark_petroleum-anthracite-background {
  background: radial-gradient($dark_petroleum, $anthracite);
}

@mixin petroleum-dark_petroleum-background {
  background: radial-gradient($petroleum, $dark_petroleum);
}

@mixin white-turquoise-background {
  background: radial-gradient($white, $light_50_turquoise);
}

.white-background {
  @include white-background;
  @include anthracite-color;
}

.turquoise-background {
  @include turquoise-background;
  @include anthracite-color;
}

.petroleum-background {
  @include petroleum-background;
  @include white-color;
}

.dark_petroleum-background {
  @include dark_petroleum-background;
  @include white-color;
}

.anthracite-background {
  @include anthracite-background;
  @include white-color;
}

.dark_anthracite-background {
  @include dark_anthracite-background;
  @include white-color;
}

.disabled-background {
  @include disabled-background;
  @include white-color;
}