﻿/*

  Used to provide extensible classes for plugin developers to use to help them match the themes they are running in

  1. Colors - creates utility classes for each of the accent colors
  2. Spacing - provides utility classes for spacing based off of the themes gutter widths
  3. Even Height Columns - provides classes for making columns even heights
  4. Breakpoint Specific Alignment - provides classes for alignment changes at specific breakpoints
  5. Utilities

*/


// About Helper Variables
// -------------------------
// Spacing, sizing, and media query helpers can be found in _sf-variables.less


// 1. Colors
// -------------------------

// accent color (DEPRACATED DO NOT USE: INSTEAD USER @theme-color-X)
.accent-color {
  color: @accent-text-color;
  background-color: @accent-color;
}

.accent-color-bordered {
  color: @accent-text-color;
  background-color: @accent-color;
  border: 1px solid darken(@accent-color, 10%);
}

// accent light color (DEPRACATED DO NOT USE: INSTEAD USER @theme-color-X)
.accent-light-color {
  color: @accent-light-text-color;
  background-color: @accent-light-color;
}

.accent-light-color-bordered {
  color: @accent-light-text-color;
  background-color: @accent-light-color;
  border: 1px solid darken(@accent-light-color, 10%);
}

// accent semibold color (DEPRACATED DO NOT USE: INSTEAD USER @theme-color-X)
.accent-semibold-color {
  color: @accent-semibold-text-color;
  background-color: @accent-semibold-color;
}

.accent-semibold-color-bordered {
  color: @accent-semibold-text-color;
  background-color: @accent-semibold-color;
  border: 1px solid darken(@accent-semibold-color, 10%);
}

// accent bold color (DEPRACATED DO NOT USE: INSTEAD USER @theme-color-X)
.accent-bold-color {
  color: @accent-bold-text-color;
  background-color: @accent-bold-color;
}

.accent-bold-color-bordered {
  color: @accent-bold-text-color;
  background-color: @accent-bold-color;
  border: 1px solid darken(@accent-bold-color, 10%);
}

// primary color
.primary-color {
  color: @btn-primary-color;
  background-color: @btn-primary-bg;
}

// theme color 1
.theme-color-1 {
  color: @theme-1-text;
  background-color: @theme-1;
}

.theme-color-1-bordered {
  color: @theme-1-text;
  background-color: @theme-1;
  border: 1px solid darken(@theme-1, 10%);
}

// theme color 2
.theme-color-2 {
  color: @theme-2-text;
  background-color: @theme-2;
}

.theme-color-2-bordered {
  color: @theme-2-text;
  background-color: @theme-2;
  border: 1px solid darken(@theme-2, 10%);
}

// theme color 3
.theme-color-3 {
  color: @theme-3-text;
  background-color: @theme-3;
}

.theme-color-3-bordered {
  color: @theme-3-text;
  background-color: @theme-3;
  border: 1px solid darken(@theme-3, 10%);
}

// theme color 4
.theme-color-4 {
  color: @theme-4-text;
  background-color: @theme-4;
}

.theme-color-4-bordered {
  color: @theme-4-text;
  background-color: @theme-4;
  border: 1px solid darken(@theme-4, 10%);
}

// theme color 5
.theme-color-5 {
  color: @theme-5-text;
  background-color: @theme-5;
}

.theme-color-5-bordered {
  color: @theme-5-text;
  background-color: @theme-5;
  border: 1px solid darken(@theme-5, 10%);
}

// theme color 6
.theme-color-6 {
  color: @theme-6-text;
  background-color: @theme-6;
}

.theme-color-6-bordered {
  color: @theme-6-text;
  background-color: @theme-6;
  border: 1px solid darken(@theme-6, 10%);
}

// theme color 7
.theme-color-7 {
  color: @theme-7-text;
  background-color: @theme-7;
}

.theme-color-7-bordered {
  color: @theme-7-text;
  background-color: @theme-7;
  border: 1px solid darken(@theme-7, 10%);
}

// background colors
.bg-color {
  background-color: @body-bg;
}

.text-color {
  color: @text-color;
}


.is-inactive {
  opacity: .6;
}

.cursor-pointer {
  cursor: pointer;
}

// 2. Spacing (note: default @grid-gutter-width is 30px in BS3)
// -------------------------

// all (top, bottom, right, left)
.padding-all-none {
  padding: 0 !important;
}
.padding-all-sm {
  padding: @grid-gutter-width * @spacing-sm !important;
}
.padding-all-md {
  padding: @grid-gutter-width * @spacing-md !important;
}
.padding-all-lg {
  padding: @grid-gutter-width * @spacing-lg !important;
}
.padding-all-xl {
  padding: @grid-gutter-width * @spacing-xl !important;
}

.margin-all-none {
  margin: 0 !important;
}
.margin-all-sm {
  margin: @grid-gutter-width * @spacing-sm !important;
}
.margin-all-md {
  margin: @grid-gutter-width * @spacing-md !important;
}
.margin-all-lg {
  margin: @grid-gutter-width * @spacing-lg !important;
}
.margin-all-xl {
  margin: @grid-gutter-width * @spacing-xl !important;
}

// vertical (top, bottom)
.padding-v-none {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.padding-v-sm {
  padding-top: @grid-gutter-width * @spacing-sm !important;
  padding-bottom: @grid-gutter-width * @spacing-sm !important;
}
.padding-v-md {
  padding-top: @grid-gutter-width * @spacing-md !important;
  padding-bottom: @grid-gutter-width * @spacing-md !important;
}
.padding-v-lg {
  padding-top: @grid-gutter-width * @spacing-lg !important;
  padding-bottom: @grid-gutter-width * @spacing-lg !important;
}
.padding-v-xl {
  padding-top: @grid-gutter-width * @spacing-xl !important;
  padding-bottom: @grid-gutter-width * @spacing-xl !important;
}

.margin-v-none {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.margin-v-sm {
  margin-top: @grid-gutter-width * @spacing-sm !important;
  margin-bottom: @grid-gutter-width * @spacing-sm !important;
}
.margin-v-md {
  margin-top: @grid-gutter-width * @spacing-md !important;
  margin-bottom: @grid-gutter-width * @spacing-md !important;
}
.margin-v-lg {
  margin-top: @grid-gutter-width * @spacing-lg !important;
  margin-bottom: @grid-gutter-width * @spacing-lg !important;
}
.margin-v-xl {
  margin-top: @grid-gutter-width * @spacing-xl !important;
  margin-bottom: @grid-gutter-width * @spacing-xl !important;
}

// horizontal (right, left)
.padding-h-none {
  padding-right: 0 !important;
  padding-left: 0 !important;
}
.padding-h-sm {
  padding-right: @grid-gutter-width * @spacing-sm !important;
  padding-left: @grid-gutter-width * @spacing-sm !important;
}
.padding-h-md {
  padding-right: @grid-gutter-width * @spacing-md !important;
  padding-left: @grid-gutter-width * @spacing-md !important;
}
.padding-h-lg {
  padding-right: @grid-gutter-width * @spacing-lg !important;
  padding-left: @grid-gutter-width * @spacing-lg !important;
}
.padding-h-xl {
  padding-right: @grid-gutter-width * @spacing-xl !important;
  padding-left: @grid-gutter-width * @spacing-xl !important;
}

.margin-h-none {
  margin-right: 0 !important;
  margin-left: 0 !important;
}
.margin-h-sm {
  margin-right: @grid-gutter-width * @spacing-sm !important;
  margin-left: @grid-gutter-width * @spacing-sm !important;
}
.margin-h-md {
  margin-right: @grid-gutter-width * @spacing-md !important;
  margin-left: @grid-gutter-width * @spacing-md !important;
}
.margin-h-lg {
  margin-right: @grid-gutter-width * @spacing-lg !important;
  margin-left: @grid-gutter-width * @spacing-lg !important;
}
.margin-h-xl {
  margin-right: @grid-gutter-width * @spacing-xl !important;
  margin-left: @grid-gutter-width * @spacing-xl !important;
}

// top
.padding-t-none {
  padding-top: 0 !important;
}
.padding-t-sm {
  padding-top: @grid-gutter-width * @spacing-sm !important;
}
.padding-t-md {
  padding-top: @grid-gutter-width * @spacing-md !important;
}
.padding-t-lg {
  padding-top: @grid-gutter-width * @spacing-lg !important;
}
.padding-t-xl {
  padding-top: @grid-gutter-width * @spacing-xl !important;
}

.margin-t-none {
  margin-top: 0 !important;
}
.margin-t-sm {
  margin-top: @grid-gutter-width * @spacing-sm !important;
}
.margin-t-md {
  margin-top: @grid-gutter-width * @spacing-md !important;
}
.margin-t-lg {
  margin-top: @grid-gutter-width * @spacing-lg !important;
}
.margin-t-xl {
  margin-top: @grid-gutter-width * @spacing-xl !important;
}

// bottom
.padding-b-none {
  padding-bottom: 0 !important;
}
.padding-b-sm {
  padding-bottom: @grid-gutter-width * @spacing-sm !important;
}
.padding-b-md {
  padding-bottom: @grid-gutter-width * @spacing-md !important;
}
.padding-b-lg {
  padding-bottom: @grid-gutter-width * @spacing-lg !important;
}
.padding-b-xl {
  padding-bottom: @grid-gutter-width * @spacing-xl !important;
}

.margin-b-none {
  margin-bottom: 0 !important;
}
.margin-b-sm {
  margin-bottom: @grid-gutter-width * @spacing-sm !important;
}
.margin-b-md {
  margin-bottom: @grid-gutter-width * @spacing-md !important;
}
.margin-b-lg {
  margin-bottom: @grid-gutter-width * @spacing-lg !important;
}
.margin-b-xl {
  margin-bottom: @grid-gutter-width * @spacing-xl !important;
}

// right
.padding-r-none {
  padding-right: 0 !important;
}
.padding-r-sm {
  padding-right: @grid-gutter-width * @spacing-sm !important;
}
.padding-r-md {
  padding-right: @grid-gutter-width * @spacing-md !important;
}
.padding-r-lg {
  padding-right: @grid-gutter-width * @spacing-lg !important;
}
.padding-r-xl {
  padding-right: @grid-gutter-width * @spacing-xl !important;
}

.margin-r-none {
  margin-right: 0 !important;
}
.margin-r-sm {
  margin-right: @grid-gutter-width * @spacing-sm !important;
}
.margin-r-md {
  margin-right: @grid-gutter-width * @spacing-md !important;
}
.margin-r-lg {
  margin-right: @grid-gutter-width * @spacing-lg !important;
}
.margin-r-xl {
  margin-right: @grid-gutter-width * @spacing-xl !important;
}

// left
.padding-l-none {
  padding-left: 0 !important;
}
.padding-l-sm {
  padding-left: @grid-gutter-width * @spacing-sm !important;
}
.padding-l-md {
  padding-left: @grid-gutter-width * @spacing-md !important;
}
.padding-l-lg {
  padding-left: @grid-gutter-width * @spacing-lg !important;
}
.padding-l-xl {
  padding-left: @grid-gutter-width * @spacing-xl !important;
}

.margin-l-none {
  margin-left: 0 !important;
}
.margin-l-sm {
  margin-left: @grid-gutter-width * @spacing-sm !important;
}
.margin-l-md {
  margin-left: @grid-gutter-width * @spacing-md !important;
}
.margin-l-lg {
  margin-left: @grid-gutter-width * @spacing-lg !important;
}
.margin-l-xl {
  margin-left: @grid-gutter-width * @spacing-xl !important;
}


// 3. Even Height Columns - provides classes for making columns even heights
// -------------------------

.row-eq-height {
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  overflow: hidden;
}

@media @md {
  .row-eq-height-md {
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    overflow: hidden;
  }
}


// 4. Breakpoint Specific Alignment - provides classes for alignment changes at specific breakpoints
// -------------------------

@media (max-width: @screen-xs-max) {
  .xs-text-center {
    text-align: center;
  }
  .xs-text-left {
    text-align: left;
  }
  .xs-text-right {
    text-align: right;
  }
}

@media (min-width: @screen-sm-min) {
  .sm-text-center {
    text-align: center;
  }
  .sm-text-left {
    text-align: left;
  }
  .sm-text-right {
    text-align: right;
  }
}

@media (min-width: @screen-md-min) {
  .md-text-center {
    text-align: center;
  }
  .md-text-left {
    text-align: left;
  }
  .md-text-right {
    text-align: right;
  }
}

@media (min-width: @screen-lg-min) {
  .lg-text-center {
    text-align: center;
  }
  .lg-text-left {
    text-align: left;
  }
  .lg-text-right {
    text-align: right;
  }
}

// 5. Utilities
// -------------------------
