@import 'css/romo/vars';

/* Globals */
/* ------- */

@mixin border-box($i:"") {
  -webkit-box-sizing: border-box #{$i};
     -moz-box-sizing: border-box #{$i};
          box-sizing: border-box #{$i};
}

@mixin box-shadow($shadow, $i:"") {
  -webkit-box-shadow: $shadow #{$i};
     -moz-box-shadow: $shadow #{$i};
          box-shadow: $shadow #{$i};
}

@mixin opacity($opacity, $i:"") {
  opacity: $opacity / 100;
}

@mixin clearfix { /* h5bp.com/q */
  &:before,
  &:after { display: table; content: ""; line-height: 0; }
  &:after { clear: both; }
}

@mixin cursor-grab {
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}

@mixin cursor-grabbing {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}

@mixin user-select($value) {
  -webkit-user-select: $value;
     -moz-user-select: $value;
      -ms-user-select: $value;
          user-select: $value;
}

/* flexbox */

@mixin display-flex($i:"") {
  display: -webkit-flex #{$i};
  display:         flex #{$i};
}

@mixin display-inline-flex($i:"") {
  display: -webkit-inline-flex #{$i};
  display:         inline-flex #{$i};
}

@mixin flex-direction($val) {
  -webkit-flex-direction: $val;
          flex-direction: $val;
}

@mixin flex-wrap($val) {
  -webkit-flex-wrap: $val;
          flex-wrap: $val;
}

@mixin flex-justify-content($val) {
  -webkit-justify-content: $val;
          justify-content: $val;
}

@mixin flex-align-items($val) {
  -webkit-align-items: $val;
          align-items: $val;
}

@mixin flex-align-self($val) {
  -webkit-align-self: $val;
          align-self: $val;
}

@mixin flex-grow($val) {
  -webkit-flex-grow: $val;
          flex-grow: $val;
}

@mixin flex-shrink($val) {
  -webkit-flex-shrink: $val;
          flex-shrink: $val;
}

/* Typography */
/* ---------- */

/* text weight */

@mixin font-weight($val, $i:"") { font-weight: $val #{$i}; }

@mixin font-weight0($i:"") { @include font-weight(300, $i); }
@mixin font-weight1($i:"") { @include font-weight(300, $i); }
@mixin font-weight2($i:"") { @include font-weight(300, $i); }
@mixin font-weight3($i:"") { @include font-weight(200, $i); }

/* text size */

@mixin font-size0($i:"") { font-size: $fontSize0 #{$i}; }
@mixin font-size1($i:"") { font-size: $fontSize1 #{$i}; }
@mixin font-size2($i:"") { font-size: $fontSize2 #{$i}; }
@mixin font-size3($i:"") { font-size: $fontSize3 #{$i}; }

@mixin line-height0($i:"") { line-height: $lineHeight0 #{$i}; }
@mixin line-height1($i:"") { line-height: $lineHeight1 #{$i}; }
@mixin line-height2($i:"") { line-height: $lineHeight2 #{$i}; }
@mixin line-height3($i:"") { line-height: $lineHeight3 #{$i}; }

@mixin text0($i:"") { @include font-size0($i); @include line-height0($i); }
@mixin text1($i:"") { @include font-size1($i); @include line-height1($i); }
@mixin text2($i:"") { @include font-size2($i); @include line-height2($i); }
@mixin text3($i:"") { @include font-size3($i); @include line-height3($i); }

/* text decoration */

@mixin text-decoration-underline($i:"")    { text-decoration: underline #{$i};    }
@mixin text-decoration-overline($i:"")     { text-decoration: overline #{$i};     }
@mixin text-decoration-line-through($i:"") { text-decoration: line-through #{$i}; }
@mixin text-decoration-none($i:"")         { text-decoration: none #{$i};         }

/* text alignment */

@mixin align-left($i:"")   { text-align: left #{$i}; }
@mixin align-center($i:"") { text-align: center #{$i}; }
@mixin align-right($i:"")  { text-align: right #{$i}; }

@mixin align-top($i:"")    { vertical-align: top #{$i}; }
@mixin align-middle($i:"") { vertical-align: middle #{$i}; }
@mixin align-bottom($i:"") { vertical-align: bottom #{$i}; }

/* color emphasis */

@mixin bg-striped($i:"") { background-color: $stripedBgColor #{$i}; }
@mixin bg-hover($i:"")   { background-color: $bgColorHover #{$i}; }

@mixin text-border-base($i:"") { color: $baseBorderColor #{$i}; }
@mixin text-border-alt($i:"")  { color: $altBorderColor #{$i}; }

@mixin text-disabled($i:"") { color: $disabledColor #{$i}; }

@mixin text-base($i:"")       { color: $baseText #{$i}; }
@mixin text-base-hover($i:"") { color: $baseTextHover #{$i}; }
@mixin bg-base($i:"")         { background-color: $baseBackground #{$i}; }
@mixin bg-base-hover($i:"")   { background-color: $baseBackgroundHover #{$i}; }
@mixin border-base($i:"")     {     border-color: $baseBorder #{$i}; }

@mixin text-alt($i:"")       { color: $altText #{$i}; }
@mixin text-alt-hover($i:"") { color: $altTextHover #{$i}; }
@mixin bg-alt($i:"")         { background-color: $altBackground #{$i}; }
@mixin bg-alt-hover($i:"")   { background-color: $altBackgroundHover #{$i}; }
@mixin border-alt($i:"")     {     border-color: $altBorder #{$i}; }

@mixin text-muted($i:"")       { color: $mutedText #{$i}; }
@mixin text-muted-hover($i:"") { color: $mutedTextHover #{$i}; }
@mixin bg-muted($i:"")         { background-color: $mutedBackground #{$i}; }
@mixin bg-muted-hover($i:"")   { background-color: $mutedBackgroundHover #{$i}; }
@mixin border-muted($i:"")     {     border-color: $mutedBorder #{$i}; }

@mixin text-warning($i:"")       { color: $warningText #{$i}; }
@mixin text-warning-hover($i:"") { color: $warningTextHover #{$i}; }
@mixin bg-warning($i:"")         { background-color: $warningBackground #{$i}; }
@mixin bg-warning-hover($i:"")   { background-color: $warningBackgroundHover #{$i}; }
@mixin border-warning($i:"")     {     border-color: $warningBorder #{$i}; }

@mixin text-error($i:"")       { color: $errorText #{$i}; }
@mixin text-error-hover($i:"") { color: $errorTextHover #{$i}; }
@mixin bg-error($i:"")         { background-color: $errorBackground #{$i}; }
@mixin bg-error-hover($i:"")   { background-color: $errorBackgroundHover #{$i}; }
@mixin border-error($i:"")     {     border-color: $errorBorder #{$i}; }

@mixin text-info($i:"")       { color: $infoText #{$i}; }
@mixin text-info-hover($i:"") { color: $infoTextHover #{$i}; }
@mixin bg-info($i:"")         { background-color: $infoBackground #{$i}; }
@mixin bg-info-hover($i:"")   { background-color: $infoBackgroundHover #{$i}; }
@mixin border-info($i:"")     {     border-color: $infoBorder #{$i}; }

@mixin text-success($i:"")       { color: $successText #{$i}; }
@mixin text-success-hover($i:"") { color: $successTextHover #{$i}; }
@mixin bg-success($i:"")         { background-color: $successBackground #{$i}; }
@mixin bg-success-hover($i:"")   { background-color: $successBackgroundHover #{$i}; }
@mixin border-success($i:"")     {     border-color: $successBorder #{$i}; }

@mixin text-inverse($i:"")       { color: $inverseText #{$i}; }
@mixin text-inverse-hover($i:"") { color: $inverseTextHover #{$i}; }
@mixin bg-inverse($i:"")         { background-color: $inverseBackground #{$i}; }
@mixin bg-inverse-hover($i:"")   { background-color: $inverseBackgroundHover #{$i}; }
@mixin border-inverse($i:"")     {     border-color: $inverseBorder #{$i}; }

/* Gradients */
/* --------- */

@mixin gradient-horizontal($start, $end) {
  background-color: $end;
  background-image: -moz-linear-gradient(left, $start, $end); // FF 3.6+
  background-image: -webkit-gradient(linear, 0 0, 100% 0, from($start), to($end)); // Safari 4+, Chrome 2+
  background-image: -webkit-linear-gradient(left, $start, $end); // Safari 5.1+, Chrome 10+
  background-image: -o-linear-gradient(left, $start, $end); // Opera 11.10
  background-image: linear-gradient(to right, $start, $end); // Standard, IE10
  background-repeat: repeat-x;
}
@mixin gradient-vertical($start, $end) {
  background-color: mix($start, $end, 60%);
  background-image: -moz-linear-gradient(top, $start, $end); // FF 3.6+
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from($start), to($end)); // Safari 4+, Chrome 2+
  background-image: -webkit-linear-gradient(top, $start, $end); // Safari 5.1+, Chrome 10+
  background-image: -o-linear-gradient(top, $start, $end); // Opera 11.10
  background-image: linear-gradient(to bottom, $start, $end); // Standard, IE10
  background-repeat: repeat-x;
}

/* Inputs */
/* ------ */

@mixin input-focus {
  border-color: $inputFocusColor;
  outline: 0;
  @include box-shadow((inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6)));
}

@mixin select-optgroup {
  font-size: $fontSize0;
  line-height: $lineHeight0;

  background-color: $inputColor;
  color: $inputBgColor;
}

@mixin select-option {
  font-size: $baseFontSize;
  line-height: $baseLineHeight;
  padding: 0 $spacingSize0;

  background-color: $inputBgColor;
  color: $inputColor;
}

/* Buttons */
/* ------- */

@mixin button-bg($start, $end, $text) {
  color: $text;
  border-color: $end $end darken($end, 10%);

  background-color: mix($start, $end, 60%);
  *background-color: $end; /* Darken IE7 buttons by default so they stand out more given they won't have borders */

  /* in these cases the gradient won't cover the background, so we override */
  &:hover, &:focus, &.active, &:active, &.disabled, &[disabled] {
    color: $text;
    background-color: $end;
    *background-color: darken($end, 5%);
  }
}

@mixin button-pad($lineHeight) {
  $inputHeight: ($lineHeight / 2) * 3; /* 30px */
  $btnPaddingTopBottom: ($inputHeight - 2 - $lineHeight) / 2; /* 4px; "2" is for the borders */
  $btnPaddingLeftRight: $btnPaddingTopBottom * 3; /* 12px; keep the 4px to 12px ratio */
  padding: $btnPaddingTopBottom $btnPaddingLeftRight;
}

@mixin button-pad0 { @include button-pad($lineHeight0); }
@mixin button-pad1 { @include button-pad($lineHeight1); }
@mixin button-pad2 { @include button-pad($lineHeight2); }
@mixin button-pad3 { @include button-pad($lineHeight3); }

@mixin button-height($lineHeight) {
  height: ($lineHeight / 2) * 3; /* 30px */
  line-height: $lineHeight;
}

@mixin button-height0 { @include button-height($lineHeight0); }
@mixin button-height1 { @include button-height($lineHeight1); }
@mixin button-height2 { @include button-height($lineHeight2); }
@mixin button-height3 { @include button-height($lineHeight3); }

@mixin button-inline($lineHeight) {
  line-height: ($lineHeight / 2) * 3; /* 30px */
  @include align-middle;
}

@mixin button-inline0 { @include button-inline($lineHeight0); }
@mixin button-inline1 { @include button-inline($lineHeight1); }
@mixin button-inline2 { @include button-inline($lineHeight2); }
@mixin button-inline3 { @include button-inline($lineHeight3); }

/* Labels */
/* ------- */

@mixin label-pad($lineHeight) {
  $inputHeight: ($lineHeight / 2) * 3; /* 30px */
  $btnPaddingTopBottom: ($inputHeight - $lineHeight) / 2; /* 5px */
  $btnPaddingLeftRight: ($btnPaddingTopBottom - 1) * 3; /* 12px; subtract "2" to match btn padding */
  padding: $btnPaddingTopBottom $btnPaddingLeftRight;
}

@mixin label-pad0 { @include label-pad($lineHeight0); }
@mixin label-pad1 { @include label-pad($lineHeight1); }
@mixin label-pad2 { @include label-pad($lineHeight2); }
@mixin label-pad3 { @include label-pad($lineHeight3); }

@mixin label-inline($lineHeight) {
  line-height: ($lineHeight / 2) * 3; /* 30px */
  @include align-middle;
}

@mixin label-inline0 { @include label-inline($lineHeight0); }
@mixin label-inline1 { @include label-inline($lineHeight1); }
@mixin label-inline2 { @include label-inline($lineHeight2); }
@mixin label-inline3 { @include label-inline($lineHeight3); }

/* Scaffolding */
/* ----------- */

/* grid helpers */

@mixin grid-span  ($num, $total, $i:"") { width:       $num * (100% / $total); }
@mixin grid-offset($num, $total, $i:"") { margin-left: $num * (100% / $total); }

/* list helpers */

@mixin list-unstyled($i:"") {
  @include rm-push;
  @include rm-pad;
  list-style: none #{$i};
}
@mixin list-styled($i:"") {
  @include rm-push;
  @include rm-pad;
  list-style-position: outside #{$i};
  padding-left: ($baseFontSize * $lineHeightToSizeRatio) #{$i};
}

/* border helpers */

@mixin border-style($val, $i:"")        { border-style:        $val #{$i}; }
@mixin border-style-top($val, $i:"")    { border-top-style:    $val #{$i}; }
@mixin border-style-right($val, $i:"")  { border-right-style:  $val #{$i}; }
@mixin border-style-bottom($val, $i:"") { border-bottom-style: $val #{$i}; }
@mixin border-style-left($val, $i:"")   { border-left-style:   $val #{$i}; }

@mixin border($size, $i:"")        { border-width:        $size #{$i}; @include border-style(solid); }
@mixin border-top($size, $i:"")    { border-top-width:    $size #{$i}; @include border-style-top(solid); }
@mixin border-right($size, $i:"")  { border-right-width:  $size #{$i}; @include border-style-right(solid); }
@mixin border-bottom($size, $i:"") { border-bottom-width: $size #{$i}; @include border-style-bottom(solid); }
@mixin border-left($size, $i:"")   { border-left-width:   $size #{$i}; @include border-style-left(solid); }

@mixin border0($i:"")        { @include border($borderSize0, $i); }
@mixin border0-top($i:"")    { @include border-top($borderSize0, $i); }
@mixin border0-right($i:"")  { @include border-right($borderSize0, $i); }
@mixin border0-bottom($i:"") { @include border-bottom($borderSize0, $i); }
@mixin border0-left($i:"")   { @include border-left($borderSize0, $i); }

@mixin border1($i:"")        { @include border($borderSize1, $i); }
@mixin border1-top($i:"")    { @include border-top($borderSize1, $i); }
@mixin border1-right($i:"")  { @include border-right($borderSize1, $i); }
@mixin border1-bottom($i:"") { @include border-bottom($borderSize1, $i); }
@mixin border1-left($i:"")   { @include border-left($borderSize1, $i); }

@mixin border2($i:"")        { @include border($borderSize2, $i); }
@mixin border2-top($i:"")    { @include border-top($borderSize2, $i); }
@mixin border2-right($i:"")  { @include border-right($borderSize2, $i); }
@mixin border2-bottom($i:"") { @include border-bottom($borderSize2, $i); }
@mixin border2-left($i:"")   { @include border-left($borderSize2, $i); }

@mixin rm-border($i:"")        { @include border(0, $i); }
@mixin rm-border-top($i:"")    { @include border-top(0, $i); }
@mixin rm-border-right($i:"")  { @include border-right(0, $i); }
@mixin rm-border-bottom($i:"") { @include border-bottom(0, $i); }
@mixin rm-border-left($i:"")   { @include border-left(0, $i); }

@mixin border-radius($radius, $i:"") {
  -webkit-border-radius: $radius #{$i};
     -moz-border-radius: $radius #{$i};
      -ms-border-radius: $radius #{$i};
          border-radius: $radius #{$i};
}

@mixin border-top-left-radius($radius, $i:"") {
  -webkit-border-top-left-radius: $radius #{$i};
      -moz-border-radius-topleft: $radius #{$i};
      -ms-border-top-left-radius: $radius #{$i};
          border-top-left-radius: $radius #{$i};
}

@mixin border-top-right-radius($radius, $i:"") {
  -webkit-border-top-right-radius: $radius #{$i};
      -moz-border-radius-topright: $radius #{$i};
      -ms-border-top-right-radius: $radius #{$i};
          border-top-right-radius: $radius #{$i};
}

@mixin border-bottom-right-radius($radius, $i:"") {
  -webkit-border-bottom-right-radius: $radius #{$i};
      -moz-border-radius-bottomright: $radius #{$i};
      -ms-border-bottom-right-radius: $radius #{$i};
          border-bottom-right-radius: $radius #{$i};
}

@mixin border-bottom-left-radius($radius, $i:"") {
  -webkit-border-bottom-left-radius: $radius #{$i};
      -moz-border-radius-bottomleft: $radius #{$i};
      -ms-border-bottom-left-radius: $radius #{$i};
          border-bottom-left-radius: $radius #{$i};
}

@mixin border0-radius($i:"")   { @include border-radius($borderRadius0, $i); }
@mixin border1-radius($i:"")   { @include border-radius($borderRadius1, $i); }
@mixin border2-radius($i:"")   { @include border-radius($borderRadius2, $i); }
@mixin rm-border-radius($i:"") { @include border-radius(0px, $i); }

@mixin border0-top-left-radius($i:"")   { @include border-top-left-radius($borderRadius0, $i); }
@mixin border1-top-left-radius($i:"")   { @include border-top-left-radius($borderRadius1, $i); }
@mixin border2-top-left-radius($i:"")   { @include border-top-left-radius($borderRadius2, $i); }
@mixin rm-border-top-left-radius($i:"") { @include border-top-left-radius(0px, $i); }

@mixin border0-top-right-radius($i:"")   { @include border-top-right-radius($borderRadius0, $i); }
@mixin border1-top-right-radius($i:"")   { @include border-top-right-radius($borderRadius1, $i); }
@mixin border2-top-right-radius($i:"")   { @include border-top-right-radius($borderRadius2, $i); }
@mixin rm-border-top-right-radius($i:"") { @include border-top-right-radius(0px, $i); }

@mixin border0-bottom-right-radius($i:"")   { @include border-bottom-right-radius($borderRadius0, $i); }
@mixin border1-bottom-right-radius($i:"")   { @include border-bottom-right-radius($borderRadius1, $i); }
@mixin border2-bottom-right-radius($i:"")   { @include border-bottom-right-radius($borderRadius2, $i); }
@mixin rm-border-bottom-right-radius($i:"") { @include border-bottom-right-radius(0px, $i); }

@mixin border0-bottom-left-radius($i:"")   { @include border-bottom-left-radius($borderRadius0, $i); }
@mixin border1-bottom-left-radius($i:"")   { @include border-bottom-left-radius($borderRadius1, $i); }
@mixin border2-bottom-left-radius($i:"")   { @include border-bottom-left-radius($borderRadius2, $i); }
@mixin rm-border-bottom-left-radius($i:"") { @include border-bottom-left-radius(0px, $i); }

/* spacing */

@mixin pad($size, $i:"")        { padding:        $size #{$i}; }
@mixin pad-top($size, $i:"")    { padding-top:    $size #{$i}; }
@mixin pad-right($size, $i:"")  { padding-right:  $size #{$i}; }
@mixin pad-bottom($size, $i:"") { padding-bottom: $size #{$i}; }
@mixin pad-left($size, $i:"")   { padding-left:   $size #{$i}; }

@mixin pad0($i:"")   { @include pad($spacingSize0, $i); }
@mixin pad1($i:"")   { @include pad($spacingSize1, $i); }
@mixin pad2($i:"")   { @include pad($spacingSize2, $i); }
@mixin rm-pad($i:"") { @include pad(0, $i); }

@mixin pad0-top($i:"")   { @include pad-top($spacingSize0, $i); }
@mixin pad1-top($i:"")   { @include pad-top($spacingSize1, $i); }
@mixin pad2-top($i:"")   { @include pad-top($spacingSize2, $i); }
@mixin rm-pad-top($i:"") { @include pad-top(0, $i); }

@mixin pad0-right($i:"")   { @include pad-right($spacingSize0, $i); }
@mixin pad1-right($i:"")   { @include pad-right($spacingSize1, $i); }
@mixin pad2-right($i:"")   { @include pad-right($spacingSize2, $i); }
@mixin rm-pad-right($i:"") { @include pad-right(0, $i); }

@mixin pad0-bottom($i:"")   { @include pad-bottom($spacingSize0, $i); }
@mixin pad1-bottom($i:"")   { @include pad-bottom($spacingSize1, $i); }
@mixin pad2-bottom($i:"")   { @include pad-bottom($spacingSize2, $i); }
@mixin rm-pad-bottom($i:"") { @include pad-bottom(0, $i); }

@mixin pad0-left($i:"")   { @include pad-left($spacingSize0, $i); }
@mixin pad1-left($i:"")   { @include pad-left($spacingSize1, $i); }
@mixin pad2-left($i:"")   { @include pad-left($spacingSize2, $i); }
@mixin rm-pad-left($i:"") { @include pad-left(0, $i); }

@mixin push($size, $i:"")        { margin:        $size #{$i}; }
@mixin push-top($size, $i:"")    { margin-top:    $size #{$i}; }
@mixin push-right($size, $i:"")  { margin-right:  $size #{$i}; }
@mixin push-bottom($size, $i:"") { margin-bottom: $size #{$i}; }
@mixin push-left($size, $i:"")   { margin-left:   $size #{$i}; }

@mixin push0($i:"")   { @include push($spacingSize0, $i); }
@mixin push1($i:"")   { @include push($spacingSize1, $i); }
@mixin push2($i:"")   { @include push($spacingSize2, $i); }
@mixin rm-push($i:"") { @include push(0, $i); }

@mixin push0-top($i:"")   { @include push-top($spacingSize0, $i); }
@mixin push1-top($i:"")   { @include push-top($spacingSize1, $i); }
@mixin push2-top($i:"")   { @include push-top($spacingSize2, $i); }
@mixin rm-push-top($i:"") { @include push-top(0, $i); }

@mixin push0-right($i:"")   { @include push-right($spacingSize0, $i); }
@mixin push1-right($i:"")   { @include push-right($spacingSize1, $i); }
@mixin push2-right($i:"")   { @include push-right($spacingSize2, $i); }
@mixin rm-push-right($i:"") { @include push-right(0, $i); }

@mixin push0-bottom($i:"")   { @include push-bottom($spacingSize0, $i); }
@mixin push1-bottom($i:"")   { @include push-bottom($spacingSize1, $i); }
@mixin push2-bottom($i:"")   { @include push-bottom($spacingSize2, $i); }
@mixin rm-push-bottom($i:"") { @include push-bottom(0, $i); }

@mixin push0-left($i:"")   { @include push-left($spacingSize0, $i); }
@mixin push1-left($i:"")   { @include push-left($spacingSize1, $i); }
@mixin push2-left($i:"")   { @include push-left($spacingSize2, $i); }
@mixin rm-push-left($i:"") { @include push-left(0, $i); }