@import 'css/romo/vars';
@import 'css/romo/mixins';

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

*, *:before, *:after { @include border-box; }

html, body { height: 100%; }

body {
  @include rm-push;
  @include bg-base;
  color: $baseColor;
  font-weight: normal;
}

*,
legend { @include border-base; }

table {
  max-width: 100%;
  background-color: transparent;
  border-collapse: collapse;
  border-spacing: 0;
}

th,
td {
  @include rm-pad;
  @include rm-border;
  @include align-left;
  @include align-middle;
}

ul, ol { @include list-styled; }

img {
  width: auto\9;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

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

body {
  font-family: $baseFontFamily;
  font-size:   $baseFontSize;
  line-height: $baseLineHeight;
}

p {
  margin: 0 0 ($baseLineHeight / 2);
}

small  { font-size: 85%; } /* Ex: 14px base font * 85% = about 12px */
strong { font-weight: bold; }
em     { font-style: italic; }

a,
a:link,
a:visited,
a:hover,
a:focus,
a:active {
  outline: 0;
}

a,
a:link,
a:visited {
  color: $linkColor;
  text-decoration: none;
}
a:hover,
a:focus,
a:active {
  color: $linkColorHover;
  text-decoration: underline;
}

a.romo-text {
  color: $baseColor;
  text-decoration: none;
}
.romo-link             { color: $linkColor !important; }
.romo-link:hover,
.romo-link-hover:hover { color: $linkColorHover !important;}

.romo-pointer  { cursor: pointer; }
.romo-grab     { @include cursor-grab; }
.romo-grabbing { @include cursor-grabbing; }

.romo-user-select-none{ @include user-select(none); }

/* images */

.romo-img-rounded { @include border-radius(6px); }
.romo-img-circle  { @include border-radius(500px); }
.romo-img-card {
  padding: 3px;
  background-color: $baseBgColor;
  border: 1px solid;
  border: 1px solid rgba(0, 0, 0, 0.2);
  @include box-shadow(0 1px 3px rgba(0, 0, 0, 0.1));
}

.romo-img0 { height: $imgHeight0 !important; }
.romo-img1 { height: $imgHeight1 !important; }
.romo-img2 { height: $imgHeight2 !important; }
.romo-img3 { height: $imgHeight3 !important; }

.romo-img-inline0 { line-height: $imgHeight0 !important; @include align-middle; }
.romo-img-inline1 { line-height: $imgHeight1 !important; @include align-middle; }
.romo-img-inline2 { line-height: $imgHeight2 !important; @include align-middle; }
.romo-img-inline3 { line-height: $imgHeight3 !important; @include align-middle; }

/* headings */

h1, h2, h3 {
  margin: ($baseLineHeight / 2) 0;
  font-weight: bold;
  text-rendering: optimizelegibility;
  small {
    font-weight: normal;
    line-height: 1;
  }
}

h1 { @include text3; }
h2 { @include text2; }
h3 { @include text1; }

/* text size */

.romo-text0,
.romo-text1,
.romo-text2,
.romo-text3 {
  text-rendering: optimizelegibility;
}

.romo-text-small,
.romo-text0 { @include text0(!important); @include font-weight0; }
.romo-text1 { @include text1(!important); @include font-weight1; }
.romo-text-large,
.romo-text2 { @include text2(!important); @include font-weight2; }
.romo-text3 { @include text3(!important); @include font-weight3; }

.romo-text-small-hover:hover,
.romo-text0-hover:hover { @include text0(!important); @include font-weight0; }
.romo-text1-hover:hover { @include text1(!important); @include font-weight1; }
.romo-text-large-hover:hover,
.romo-text2-hover:hover { @include text2(!important); @include font-weight2; }
.romo-text3-hover:hover { @include text3(!important); @include font-weight3; }

.romo-text-inline-small,
.romo-text-inline0 { @include line-height0(!important); }
.romo-text-inline1 { @include line-height1(!important); }
.romo-text-inline-large,
.romo-text-inline2 { @include line-height2(!important); }
.romo-text-inline3 { @include line-height3(!important); }

/* text weight */

.romo-text-normal  { @include font-weight(normal,  !important); }
.romo-text-lighter { @include font-weight(lighter, !important); }
.romo-text-bold    { @include font-weight(bold,    !important); }
.romo-text-bolder  { @include font-weight(bolder,  !important); }
.romo-text-100     { @include font-weight(100,     !important); }
.romo-text-200     { @include font-weight(200,     !important); }
.romo-text-300     { @include font-weight(300,     !important); }
.romo-text-400     { @include font-weight(400,     !important); }
.romo-text-500     { @include font-weight(500,     !important); }
.romo-text-600     { @include font-weight(600,     !important); }
.romo-text-700     { @include font-weight(700,     !important); }
.romo-text-800     { @include font-weight(800,     !important); }
.romo-text-900     { @include font-weight(900,     !important); }

.romo-text-normal-hover:hover  { @include font-weight(normal,  !important); }
.romo-text-lighter-hover:hover { @include font-weight(lighter, !important); }
.romo-text-bold-hover:hover    { @include font-weight(bold,    !important); }
.romo-text-bolder-hover:hover  { @include font-weight(bolder,  !important); }
.romo-text-100-hover:hover     { @include font-weight(100,     !important); }
.romo-text-200-hover:hover     { @include font-weight(200,     !important); }
.romo-text-300-hover:hover     { @include font-weight(300,     !important); }
.romo-text-400-hover:hover     { @include font-weight(400,     !important); }
.romo-text-500-hover:hover     { @include font-weight(500,     !important); }
.romo-text-600-hover:hover     { @include font-weight(600,     !important); }
.romo-text-700-hover:hover     { @include font-weight(700,     !important); }
.romo-text-800-hover:hover     { @include font-weight(800,     !important); }
.romo-text-900-hover:hover     { @include font-weight(900,     !important); }

/* text decoration */

.romo-text-underline     { @include text-decoration-underline(!important); }
.romo-text-overline      { @include text-decoration-overline(!important); }
.romo-text-line-through,
.romo-text-strikethrough { @include text-decoration-line-through(!important); }
.romo-text-no-line       { @include text-decoration-none(!important); }

.romo-text-underline-hover:hover     { @include text-decoration-underline(!important); }
.romo-text-overline-hover:hover      { @include text-decoration-overline(!important); }
.romo-text-line-through-hover:hover,
.romo-text-strikethrough-hover:hover { @include text-decoration-line-through(!important); }
.romo-text-no-line-hover:hover       { @include text-decoration-none(!important); }

/* alignment */

.romo-align-left   { @include align-left(!important); }
.romo-align-center { @include align-center(!important); }
.romo-align-right  { @include align-right(!important); }

.romo-align-top    { @include align-top(!important); }
.romo-align-middle { @include align-middle(!important); }
.romo-align-bottom { @include align-bottom(!important); }

/* color emphasis */

.romo-bg-base  { @include bg-base(!important); }
.romo-bg-alt   { @include bg-alt(!important); }
.romo-bg-hover { @include bg-hover(!important); }

.romo-border-base { @include border-base(!important); }
.romo-border-alt  { @include border-alt(!important); }

.romo-text-border-base { @include text-border-base(!important); }
.romo-text-border-alt  { @include text-border-alt(!important); }
.romo-text-disabled    { @include text-disabled(!important); }
.romo-text-base        { @include text-base(!important); }
.romo-text-alt         { @include text-alt(!important); }
.romo-text-muted       { @include text-muted(!important); }
.romo-text-warning     { @include text-warning(!important); }
.romo-text-error       { @include text-error(!important); }
.romo-text-info        { @include text-info(!important); }
.romo-text-success     { @include text-success(!important); }
.romo-text-inverse     { @include text-inverse(!important); }

.romo-text-base-hover:hover, a.romo-text-base:hover, a.romo-text-base:focus {
  @include text-base-hover(!important);
}
.romo-text-alt-hover:hover, a.romo-text-alt:hover, a.romo-text-alt:focus {
  @include text-alt-hover(!important);
}
.romo-text-muted-hover:hover, a.romo-text-muted:hover, a.romo-text-muted:focus {
  @include text-muted-hover(!important);
}
.romo-text-warning-hover:hover, a.romo-text-warning:hover, a.romo-text-warning:focus {
  @include text-warning-hover(!important);
}
.romo-text-error-hover:hover, a.romo-text-error:hover, a.romo-text-error:focus {
  @include text-error-hover(!important);
}
.romo-text-info-hover:hover, a.romo-text-info:hover, a.romo-text-info:focus {
  @include text-info-hover(!important);
}
.romo-text-success-hover:hover, a.romo-text-success:hover, a.romo-text-success:focus {
  @include text-success-hover(!important);
}
.romo-text-inverse-hover:hover, a.romo-text-inverse:hover, a.romo-text-inverse:focus {
  @include text-inverse-hover(!important);
}

.romo-bg-base    { @include bg-base(!important); }
.romo-bg-alt     { @include bg-alt(!important); }
.romo-bg-muted   { @include bg-muted(!important); }
.romo-bg-warning { @include bg-warning(!important); }
.romo-bg-error   { @include bg-error(!important); }
.romo-bg-info    { @include bg-info(!important); }
.romo-bg-success { @include bg-success(!important); }
.romo-bg-inverse { @include bg-inverse(!important); }

.romo-bg-base-hover:hover, a.romo-bg-base:hover, a.romo-bg-base:focus {
  @include bg-base-hover(!important);
}
.romo-bg-alt-hover:hover, a.romo-bg-alt:hover, a.romo-bg-alt:focus {
  @include bg-alt-hover(!important);
}
.romo-bg-muted-hover:hover, a.romo-bg-muted:hover, a.romo-bg-muted:focus {
  @include bg-muted-hover(!important);
}
.romo-bg-warning-hover:hover, a.romo-bg-warning:hover, a.romo-bg-warning:focus {
  @include bg-warning-hover(!important);
}
.romo-bg-error-hover:hover, a.romo-bg-error:hover, a.romo-bg-error:focus {
  @include bg-error-hover(!important);
}
.romo-bg-info-hover:hover, a.romo-bg-info:hover, a.romo-bg-info:focus {
  @include bg-info-hover(!important);
}
.romo-bg-success-hover:hover, a.romo-bg-success:hover, a.romo-bg-success:focus {
  @include bg-success-hover(!important);
}
.romo-bg-inverse-hover:hover, a.romo-bg-inverse:hover, a.romo-bg-inverse:focus {
  @include bg-inverse-hover(!important);
}

.romo-border-muted   { @include border-muted(!important); }
.romo-border-warning { @include border-warning(!important); }
.romo-border-error   { @include border-error(!important); }
.romo-border-info    { @include border-info(!important); }
.romo-border-success { @include border-success(!important); }
.romo-border-inverse { @include border-inverse(!important); }

.romo-border-muted-hover:hover, a.romo-border-muted:hover, a.romo-border-muted:focus {
  @include border-muted(!important);
}
.romo-border-warning-hover:hover, a.romo-border-warning:hover, a.romo-border-warning:focus {
  @include border-warning(!important);
}
.romo-border-error-hover:hover, a.romo-border-error:hover, a.romo-border-error:focus {
  @include border-error(!important);
}
.romo-border-info-hover:hover, a.romo-border-info:hover, a.romo-border-info:focus {
  @include border-info(!important);
}
.romo-border-success-hover:hover, a.romo-border-success:hover, a.romo-border-success:focus {
  @include border-success(!important);
}
.romo-border-inverse-hover:hover, a.romo-border-inverse:hover, a.romo-border-inverse:focus {
  @include border-inverse(!important);
}

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

/* border helpers */

.romo-border-solid  { @include border-style(solid,  !important); }
.romo-border-dashed { @include border-style(dashed, !important); }
.romo-border-dotted { @include border-style(dotted, !important); }
.romo-border-double { @include border-style(double, !important); }
.romo-border-groove { @include border-style(groove, !important); }
.romo-border-inset  { @include border-style(inset,  !important); }
.romo-border-hidden { @include border-style(hidden, !important); }
.romo-border-none   { @include border-style(none,   !important); }

.romo-border-solid-hover:hover  { @include border-style(solid,  !important); }
.romo-border-dashed-hover:hover { @include border-style(dashed, !important); }
.romo-border-dotted-hover:hover { @include border-style(dotted, !important); }
.romo-border-double-hover:hover { @include border-style(double, !important); }
.romo-border-groove-hover:hover { @include border-style(groove, !important); }
.romo-border-inset-hover:hover  { @include border-style(inset,  !important); }
.romo-border-hidden-hover:hover { @include border-style(hidden, !important); }
.romo-border-none-hover:hover   { @include border-style(none,   !important); }

.romo-border-solid-top  { @include border-style-top(solid,  !important); }
.romo-border-dashed-top { @include border-style-top(dashed, !important); }
.romo-border-dotted-top { @include border-style-top(dotted, !important); }
.romo-border-double-top { @include border-style-top(double, !important); }
.romo-border-groove-top { @include border-style-top(groove, !important); }
.romo-border-inset-top  { @include border-style-top(inset,  !important); }
.romo-border-hidden-top { @include border-style-top(hidden, !important); }
.romo-border-none-top   { @include border-style-top(none,   !important); }

.romo-border-solid-top-hover:hover  { @include border-style-top(solid,  !important); }
.romo-border-dashed-top-hover:hover { @include border-style-top(dashed, !important); }
.romo-border-dotted-top-hover:hover { @include border-style-top(dotted, !important); }
.romo-border-double-top-hover:hover { @include border-style-top(double, !important); }
.romo-border-groove-top-hover:hover { @include border-style-top(groove, !important); }
.romo-border-inset-top-hover:hover  { @include border-style-top(inset,  !important); }
.romo-border-hidden-top-hover:hover { @include border-style-top(hidden, !important); }
.romo-border-none-top-hover:hover   { @include border-style-top(none,   !important); }

.romo-border-solid-right  { @include border-style-right(solid,  !important); }
.romo-border-dashed-right { @include border-style-right(dashed, !important); }
.romo-border-dotted-right { @include border-style-right(dotted, !important); }
.romo-border-double-right { @include border-style-right(double, !important); }
.romo-border-groove-right { @include border-style-right(groove, !important); }
.romo-border-inset-right  { @include border-style-right(inset,  !important); }
.romo-border-hidden-right { @include border-style-right(hidden, !important); }
.romo-border-none-right   { @include border-style-right(none,   !important); }

.romo-border-solid-right-hover:hover  { @include border-style-right(solid,  !important); }
.romo-border-dashed-right-hover:hover { @include border-style-right(dashed, !important); }
.romo-border-dotted-right-hover:hover { @include border-style-right(dotted, !important); }
.romo-border-double-right-hover:hover { @include border-style-right(double, !important); }
.romo-border-groove-right-hover:hover { @include border-style-right(groove, !important); }
.romo-border-inset-right-hover:hover  { @include border-style-right(inset,  !important); }
.romo-border-hidden-right-hover:hover { @include border-style-right(hidden, !important); }
.romo-border-none-right-hover:hover   { @include border-style-right(none,   !important); }

.romo-border-solid-bottom  { @include border-style-bottom(solid,  !important); }
.romo-border-dashed-bottom { @include border-style-bottom(dashed, !important); }
.romo-border-dotted-bottom { @include border-style-bottom(dotted, !important); }
.romo-border-double-bottom { @include border-style-bottom(double, !important); }
.romo-border-groove-bottom { @include border-style-bottom(groove, !important); }
.romo-border-inset-bottom  { @include border-style-bottom(inset,  !important); }
.romo-border-hidden-bottom { @include border-style-bottom(hidden, !important); }
.romo-border-none-bottom   { @include border-style-bottom(none,   !important); }

.romo-border-solid-bottom-hover:hover  { @include border-style-bottom(solid,  !important); }
.romo-border-dashed-bottom-hover:hover { @include border-style-bottom(dashed, !important); }
.romo-border-dotted-bottom-hover:hover { @include border-style-bottom(dotted, !important); }
.romo-border-double-bottom-hover:hover { @include border-style-bottom(double, !important); }
.romo-border-groove-bottom-hover:hover { @include border-style-bottom(groove, !important); }
.romo-border-inset-bottom-hover:hover  { @include border-style-bottom(inset,  !important); }
.romo-border-hidden-bottom-hover:hover { @include border-style-bottom(hidden, !important); }
.romo-border-none-bottom-hover:hover   { @include border-style-bottom(none,   !important); }

.romo-border-solid-left  { @include border-style-left(solid,  !important); }
.romo-border-dashed-left { @include border-style-left(dashed, !important); }
.romo-border-dotted-left { @include border-style-left(dotted, !important); }
.romo-border-double-left { @include border-style-left(double, !important); }
.romo-border-groove-left { @include border-style-left(groove, !important); }
.romo-border-inset-left  { @include border-style-left(inset,  !important); }
.romo-border-hidden-left { @include border-style-left(hidden, !important); }
.romo-border-none-left   { @include border-style-left(none,   !important); }

.romo-border-solid-left-hover:hover  { @include border-style-left(solid,  !important); }
.romo-border-dashed-left-hover:hover { @include border-style-left(dashed, !important); }
.romo-border-dotted-left-hover:hover { @include border-style-left(dotted, !important); }
.romo-border-double-left-hover:hover { @include border-style-left(double, !important); }
.romo-border-groove-left-hover:hover { @include border-style-left(groove, !important); }
.romo-border-inset-left-hover:hover  { @include border-style-left(inset,  !important); }
.romo-border-hidden-left-hover:hover { @include border-style-left(hidden, !important); }
.romo-border-none-left-hover:hover   { @include border-style-left(none,   !important); }

.romo-border,
.romo-border1   { @include border1(!important); }
.romo-border0   { @include border0(!important); }
.romo-border2   { @include border2(!important); }
.romo-rm-border { @include rm-border(!important); }

.romo-border-hover:hover,
.romo-border1-hover:hover   { @include border1(!important); }
.romo-border0-hover:hover   { @include border0(!important); }
.romo-border2-hover:hover   { @include border2(!important); }
.romo-rm-border-hover:hover { @include rm-border(!important); }

.romo-border-top,
.romo-border1-top   { @include border1-top(!important); }
.romo-border0-top   { @include border0-top(!important); }
.romo-border2-top   { @include border2-top(!important); }
.romo-rm-border-top { @include rm-border-top(!important); }

.romo-border-top-hover:hover,
.romo-border1-top-hover:hover   { @include border1-top(!important); }
.romo-border0-top-hover:hover   { @include border0-top(!important); }
.romo-border2-top-hover:hover   { @include border2-top(!important); }
.romo-rm-border-top-hover:hover { @include rm-border-top(!important); }

.romo-border-right,
.romo-border1-right   { @include border1-right(!important); }
.romo-border0-right   { @include border0-right(!important); }
.romo-border2-right   { @include border2-right(!important); }
.romo-rm-border-right { @include rm-border-right(!important); }

.romo-border-right-hover:hover,
.romo-border1-right-hover:hover   { @include border1-right(!important); }
.romo-border0-right-hover:hover   { @include border0-right(!important); }
.romo-border2-right-hover:hover   { @include border2-right(!important); }
.romo-rm-border-right-hover:hover { @include rm-border-right(!important); }

.romo-border-bottom,
.romo-border1-bottom   { @include border1-bottom(!important); }
.romo-border0-bottom   { @include border0-bottom(!important); }
.romo-border2-bottom   { @include border2-bottom(!important); }
.romo-rm-border-bottom { @include rm-border-bottom(!important); }

.romo-border-bottom-hover:hover,
.romo-border1-bottom-hover:hover   { @include border1-bottom(!important); }
.romo-border0-bottom-hover:hover   { @include border0-bottom(!important); }
.romo-border2-bottom-hover:hover   { @include border2-bottom(!important); }
.romo-rm-border-bottom-hover:hover { @include rm-border-bottom(!important); }

.romo-border-left,
.romo-border1-left   { @include border1-left(!important); }
.romo-border0-left   { @include border0-left(!important); }
.romo-border2-left   { @include border2-left(!important); }
.romo-rm-border-left { @include rm-border-left(!important); }

.romo-border-left-hover:hover,
.romo-border1-left-hover:hover   { @include border1-left(!important); }
.romo-border0-left-hover:hover   { @include border0-left(!important); }
.romo-border2-left-hover:hover   { @include border2-left(!important); }
.romo-rm-border-left-hover:hover { @include rm-border-left(!important); }

.romo-border-radius,
.romo-border1-radius   { @include border1-radius(!important); }
.romo-border0-radius   { @include border0-radius(!important); }
.romo-border2-radius   { @include border2-radius(!important); }
.romo-rm-border-radius { @include rm-border-radius(!important); }

.romo-border-radius-hover:hover,
.romo-border1-radius-hover:hover   { @include border1-radius(!important); }
.romo-border0-radius-hover:hover   { @include border0-radius(!important); }
.romo-border2-radius-hover:hover   { @include border2-radius(!important); }
.romo-rm-border-radius-hover:hover { @include rm-border-radius(!important); }

.romo-border-top-left-radius,
.romo-border1-top-left-radius   { @include border1-top-left-radius(!important); }
.romo-border0-top-left-radius   { @include border0-top-left-radius(!important); }
.romo-border2-top-left-radius   { @include border2-top-left-radius(!important); }
.romo-rm-border-top-left-radius { @include rm-border-top-left-radius(!important); }

.romo-border-top-left-radius-hover:hover,
.romo-border1-top-left-radius-hover:hover   { @include border1-top-left-radius(!important); }
.romo-border0-top-left-radius-hover:hover   { @include border0-top-left-radius(!important); }
.romo-border2-top-left-radius-hover:hover   { @include border2-top-left-radius(!important); }
.romo-rm-border-top-left-radius-hover:hover { @include rm-border-top-left-radius(!important); }

.romo-border-top-right-radius,
.romo-border1-top-right-radius   { @include border1-top-right-radius(!important); }
.romo-border0-top-right-radius   { @include border0-top-right-radius(!important); }
.romo-border2-top-right-radius   { @include border2-top-right-radius(!important); }
.romo-rm-border-top-right-radius { @include rm-border-top-right-radius(!important); }

.romo-border-top-right-radius-hover:hover,
.romo-border1-top-right-radius-hover:hover   { @include border1-top-right-radius(!important); }
.romo-border0-top-right-radius-hover:hover   { @include border0-top-right-radius(!important); }
.romo-border2-top-right-radius-hover:hover   { @include border2-top-right-radius(!important); }
.romo-rm-border-top-right-radius-hover:hover { @include rm-border-top-right-radius(!important); }

.romo-border-bottom-right-radius,
.romo-border1-bottom-right-radius   { @include border1-bottom-right-radius(!important); }
.romo-border0-bottom-right-radius   { @include border0-bottom-right-radius(!important); }
.romo-border2-bottom-right-radius   { @include border2-bottom-right-radius(!important); }
.romo-rm-border-bottom-right-radius { @include rm-border-bottom-right-radius(!important); }

.romo-border-bottom-right-radius-hover:hover,
.romo-border1-bottom-right-radius-hover:hover   { @include border1-bottom-right-radius(!important); }
.romo-border0-bottom-right-radius-hover:hover   { @include border0-bottom-right-radius(!important); }
.romo-border2-bottom-right-radius-hover:hover   { @include border2-bottom-right-radius(!important); }
.romo-rm-border-bottom-right-radius-hover:hover { @include rm-border-bottom-right-radius(!important); }

.romo-border-bottom-left-radius,
.romo-border1-bottom-left-radius   { @include border1-bottom-left-radius(!important); }
.romo-border0-bottom-left-radius   { @include border0-bottom-left-radius(!important); }
.romo-border2-bottom-left-radius   { @include border2-bottom-left-radius(!important); }
.romo-rm-border-bottom-left-radius { @include rm-border-bottom-left-radius(!important); }

.romo-border-bottom-left-radius-hover:hover,
.romo-border1-bottom-left-radius-hover:hover   { @include border1-bottom-left-radius(!important); }
.romo-border0-bottom-left-radius-hover:hover   { @include border0-bottom-left-radius(!important); }
.romo-border2-bottom-left-radius-hover:hover   { @include border2-bottom-left-radius(!important); }
.romo-rm-border-bottom-left-radius-hover:hover { @include rm-border-bottom-left-radius(!important); }

.romo-border-radius-circle { @include border-radius(500px); }
.romo-border-radius-circle-hover:hover { @include border-radius(500px); }

/* spacing */

.romo-pad,
.romo-pad1   { @include pad1(!important); }
.romo-pad0   { @include pad0(!important); }
.romo-pad2   { @include pad2(!important); }
.romo-pad-none,
.romo-rm-pad { @include rm-pad(!important); }

.romo-pad-top,
.romo-pad1-top   { @include pad1-top(!important); }
.romo-pad0-top   { @include pad0-top(!important); }
.romo-pad2-top   { @include pad2-top(!important); }
.romo-pad-none-top,
.romo-rm-pad-top { @include rm-pad-top(!important); }

.romo-pad-right,
.romo-pad1-right   { @include pad1-right(!important); }
.romo-pad0-right   { @include pad0-right(!important); }
.romo-pad2-right   { @include pad2-right(!important); }
.romo-pad-none-right,
.romo-rm-pad-right { @include rm-pad-right(!important); }

.romo-pad-bottom,
.romo-pad1-bottom   { @include pad1-bottom(!important); }
.romo-pad0-bottom   { @include pad0-bottom(!important); }
.romo-pad2-bottom   { @include pad2-bottom(!important); }
.romo-pad-none-bottom,
.romo-rm-pad-bottom { @include rm-pad-bottom(!important); }

.romo-pad-left,
.romo-pad1-left   { @include pad1-left(!important); }
.romo-pad0-left   { @include pad0-left(!important); }
.romo-pad2-left   { @include pad2-left(!important); }
.romo-pad-none-left,
.romo-rm-pad-left { @include rm-pad-left(!important); }

.romo-push,
.romo-push1   { @include push1(!important); }
.romo-push0   { @include push0(!important); }
.romo-push2   { @include push2(!important); }
.romo-push-none,
.romo-rm-push { @include rm-push(!important); }

.romo-push-top,
.romo-push1-top   { @include push1-top(!important); }
.romo-push0-top   { @include push0-top(!important); }
.romo-push2-top   { @include push2-top(!important); }
.romo-push-none-top,
.romo-rm-push-top { @include rm-push-top(!important); }

.romo-push-right,
.romo-push1-right   { @include push1-right(!important); }
.romo-push0-right   { @include push0-right(!important); }
.romo-push2-right   { @include push2-right(!important); }
.romo-push-none-right,
.romo-rm-push-right { @include rm-push-right(!important); }

.romo-push-bottom,
.romo-push1-bottom   { @include push1-bottom(!important); }
.romo-push0-bottom   { @include push0-bottom(!important); }
.romo-push2-bottom   { @include push2-bottom(!important); }
.romo-push-none-bottom,
.romo-rm-push-bottom { @include rm-push-bottom(!important); }

.romo-push-left,
.romo-push1-left   { @include push1-left(!important); }
.romo-push0-left   { @include push0-left(!important); }
.romo-push2-left   { @include push2-left(!important); }
.romo-push-none-left,
.romo-rm-push-left { @include rm-push-left(!important); }

.romo-push-center { margin: 0 auto !important; }

/* other helpers */

.romo-full-width  { width:  100% !important; }
.romo-full-height { height: 100% !important; }
.romo-match-line-height { line-height: 1 !important; }

.romo-nowrap        { white-space: nowrap !important; }
.romo-crop          { white-space: nowrap !important; overflow: hidden !important; }
.romo-ellipsis      { overflow: hidden !important; text-overflow: ellipsis !important; }
.romo-crop-ellipsis { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }

.romo-inline       { display: inline !important; }
.romo-inline-block { display: inline-block !important; }
.romo-inline-flex  { @include display-inline-flex(!important); }
.romo-flex         { @include display-flex(!important); }
.romo-block        { display: block !important; }
.romo-display-none { display: none !important;}

.romo-hover:hover {
  .romo-inline-hover       { display: inline !important; }
  .romo-inline-block-hover { display: inline-block !important; }
  .romo-inline-flex-hover  { @include display-inline-flex(!important); }
  .romo-flex-hover         { @include display-flex(!important); }
  .romo-block-hover        { display: block !important; }
  .romo-display-none-hover { display: none !important;}
}

.romo-relative { position: relative !important; }
.romo-absolute { position: absolute !important; }
.romo-absolute-fill {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.romo-fixed    { position: fixed !important; }

.romo-clearfix { @include clearfix; }
.romo-pull-left,
.romo-float-left  { float: left !important; }
.romo-pull-right,
.romo-float-right { float: right !important; }

.romo-overflow-hidden { overflow: hidden !important; }
.romo-overflow-auto   { overflow: auto !important; }
.romo-overflow-scroll { overflow: scroll !important; }

.romo-overflow-x-hidden { overflow-x: hidden !important; }
.romo-overflow-x-auto   { overflow-x: auto !important; }
.romo-overflow-x-scroll { overflow-x: scroll !important; }

.romo-overflow-y-hidden { overflow-y: hidden !important; }
.romo-overflow-y-auto   { overflow-y: auto !important; }
.romo-overflow-y-scroll { overflow-y: scroll !important; }