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

.romo {

  .romo-label {
    display:          inline-block;
    font-size:        $baseFontSize;
    line-height:      $baseLineHeight;
    background-color: $btnAltBgHover;
    color:            $btnAltColor;

    @include label-pad($baseLineHeight);
    @include rm-push;
    @include align-center;
    @include align-middle;
  }

  .romo-label.romo-label-small,
  .romo-label.romo-label0 { @include font-size0; @include font-weight0; @include line-height0; @include label-pad0; }
  .romo-label,
  .romo-label.romo-label1 { @include font-size1; @include font-weight1; @include line-height1; @include label-pad1; }
  .romo-label.romo-label-large,
  .romo-label.romo-label2 { @include font-size2; @include font-weight2; @include line-height2; @include label-pad2; }
  .romo-label.romo-label3 { @include font-size3; @include font-weight3; @include line-height3; @include label-pad3; }

  .romo-label-inline-small,
  .romo-label-inline0 { @include label-inline0; }
  .romo-label-inline,
  .romo-label-inline1 { @include label-inline1; }
  .romo-label-inline-large,
  .romo-label-inline2 { @include label-inline2; }
  .romo-label-inline3 { @include label-inline3; }

  .romo-label-block { display: block; width: 100%; }

  /* emphasis colored labels */

  .romo-label.romo-label-alt     { background-color: $btnBg;        color: $btnColor;        }
  .romo-label.romo-label-inverse { background-color: $btnInverseBg; color: $btnInverseColor; }
  .romo-label.romo-label-warning { background-color: $btnWarningBg; color: $btnWarningColor; }
  .romo-label.romo-label-danger  { background-color: $btnDangerBg;  color: $btnDangerColor;  }
  .romo-label.romo-label-info    { background-color: $btnInfoBg;    color: $btnInfoColor;    }
  .romo-label.romo-label-success { background-color: $btnSuccessBg; color: $btnSuccessColor; }

  /* explicit colored labels */

  .romo-label.romo-label-dark-red      { background-color: $btnDarkRedBg;      color: $btnDarkRedColor;      }
  .romo-label.romo-label-red           { background-color: $btnRedBg;          color: $btnRedColor;          }
  .romo-label.romo-label-light-red     { background-color: $btnLightRedBg;     color: $btnLightRedColor;     }
  .romo-label.romo-label-pastel-red    { background-color: $btnPastelRedBg;    color: $btnPastelRedColor;    }
  .romo-label.romo-label-dark-orange   { background-color: $btnDarkOrangeBg;   color: $btnDarkOrangeColor;   }
  .romo-label.romo-label-orange        { background-color: $btnOrangeBg;       color: $btnOrangeColor;       }
  .romo-label.romo-label-yellow        { background-color: $btnYellowBg;       color: $btnYellowColor;       }
  .romo-label.romo-label-pastel-yellow { background-color: $btnPastelYellowBg; color: $btnPastelYellowColor; }
  .romo-label.romo-label-purple        { background-color: $btnPurpleBg;       color: $btnPurpleColor;       }
  .romo-label.romo-label-light-purple  { background-color: $btnLightPurpleBg;  color: $btnLightPurpleColor;  }
  .romo-label.romo-label-dark-pink     { background-color: $btnDarkPinkBg;     color: $btnDarkPinkColor;     }
  .romo-label.romo-label-hot-pink      { background-color: $btnHotPinkBg;      color: $btnHotPinkColor;      }
  .romo-label.romo-label-pink          { background-color: $btnPinkBg;         color: $btnPinkColor;         }
  .romo-label.romo-label-dark-green    { background-color: $btnDarkGreenBg;    color: $btnDarkGreenColor;    }
  .romo-label.romo-label-green         { background-color: $btnGreenBg;        color: $btnGreenColor;        }
  .romo-label.romo-label-light-green   { background-color: $btnLightGreenBg;   color: $btnLightGreenColor;   }
  .romo-label.romo-label-pastel-green  { background-color: $btnPastelGreenBg;  color: $btnPastelGreenColor;  }
  .romo-label.romo-label-navy          { background-color: $btnNavyBg;         color: $btnNavyColor;         }
  .romo-label.romo-label-dark-blue     { background-color: $btnDarkBlueBg;     color: $btnDarkBlueColor;     }
  .romo-label.romo-label-blue          { background-color: $btnBlueBg;         color: $btnBlueColor;         }
  .romo-label.romo-label-light-blue    { background-color: $btnLightBlueBg;    color: $btnLightBlueColor;    }
  .romo-label.romo-label-pastel-blue   { background-color: $btnPastelBlueBg;   color: $btnPastelBlueColor;   }

}