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

a.romo-btn,
button.romo-btn,
.romo-btn {
  display: inline-block;
  @include rm-push;
  @include align-center;
  @include align-middle;

  @include button-bg($btnBackground, $btnBackgroundHighlight, $btnColor);
  @include border1;
  border-color: $btnBorder;
  border-bottom-color: darken($btnBorder, 10%);
  @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
}

a.romo-btn,
button.romo-btn { cursor: pointer; }

a.romo-btn:hover,
button.romo-btn:hover,
a.romo-btn:focus,
button.romo-btn:focus {
  color: $btnColorHover;
  text-decoration: none;
  background-position: 0 -15px;
}

.romo-btn:focus{ outline: none; }
.romo-btn.active,
.romo-btn:active {
  background-image: none;
  outline: 0;
  @include box-shadow((inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)));
}

.romo-btn.disabled,
.romo-btn[disabled] {
  cursor: $notAllowedCursor;
  background-image: none;
  @include opacity(65);
  @include box-shadow(none);
}

a.romo-btn.romo-btn-small,
button.romo-btn.romo-btn.small,
.romo-btn.romo-btn-small,
a.romo-btn.romo-btn0,
button.romo-btn.romo-btn0,
.romo-btn.romo-btn0 { @include font-size0; @include font-weight0; @include button-height0; @include button-pad0; }
a.romo-btn,
button.romo-btn,
.romo-btn,
a.romo-btn.romo-btn1,
button.romo-btn.romo-btn1,
.romo-btn.romo-btn1 { @include font-size1; @include font-weight1; @include button-height1; @include button-pad1; }
a.romo-btn.romo-btn-large,
button.romo-btn.romo-btn-large,
.romo-btn.romo-btn-large,
a.romo-btn.romo-btn2,
button.romo-btn.romo-btn2,
.romo-btn.romo-btn2 { @include font-size2; @include font-weight2; @include button-height2; @include button-pad2; }
a.romo-btn.romo-btn3,
button.romo-btn.romo-btn3,
.romo-btn.romo-btn3 { @include font-size3; @include font-weight3; @include button-height3; @include button-pad3; }

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

input[type="submit"].romo-btn-block,
input[type="reset"].romo-btn-block,
input[type="button"].romo-btn-block,
.romo-btn-block { display: block; width: 100%; }

a.romo-btn.romo-btn-alt,
button.romo-btn.romo-btn-alt,
.romo-btn.romo-btn-alt     { @include button-bg($btnAltBackground,     $btnAltBackgroundHighlight,     $btnAltColor); }
a.romo-btn.romo-btn-primary,
button.romo-btn.romo-btn-primary,
.romo-btn.romo-btn-primary { @include button-bg($btnPrimaryBackground, $btnPrimaryBackgroundHighlight, $btnPrimaryColor); }
a.romo-btn.romo-btn-warning,
button.romo-btn.romo-btn-warning,
.romo-btn.romo-btn-warning { @include button-bg($btnWarningBackground, $btnWarningBackgroundHighlight, $btnWarningColor); }
a.romo-btn.romo-btn-error,
button.romo-btn.romo-btn-error,
.romo-btn.romo-btn-error,
a.romo-btn.romo-btn-danger,
button.romo-btn.romo-btn-danger,
.romo-btn.romo-btn-danger  { @include button-bg($btnDangerBackground,  $btnDangerBackgroundHighlight,  $btnDangerColor); }
a.romo-btn.romo-btn-info,
button.romo-btn.romo-btn-info,
.romo-btn.romo-btn-info    { @include button-bg($btnInfoBackground,    $btnInfoBackgroundHighlight,    $btnInfoColor); }
a.romo-btn.romo-btn-success,
button.romo-btn.romo-btn-success,
.romo-btn.romo-btn-success { @include button-bg($btnSuccessBackground, $btnSuccessBackgroundHighlight, $btnSuccessColor); }
a.romo-btn.romo-btn-inverse,
button.romo-btn.romo-btn-inverse,
.romo-btn.romo-btn-inverse { @include button-bg($btnInverseBackground, $btnInverseBackgroundHighlight, $btnInverseColor); }

a.romo-btn.romo-btn-link,
button.romo-btn.romo-btn-link,
.romo-btn.romo-btn-link,
a.romo-btn.romo-btn-link.active,
button.romo-btn.romo-btn-link.active,
.romo-btn.romo-btn-link.active,
a.romo-btn.romo-btn-link:active,
button.romo-btn.romo-btn-link:active,
.romo-btn.romo-btn-link:active,
a.romo-btn.romo-btn-link.disabled,
button.romo-btn.romo-btn-link.disabled,
.romo-btn.romo-btn-link.disabled,
a.romo-btn.romo-btn-link[disabled],
button.romo-btn.romo-btn-link[disabled],
.romo-btn.romo-btn-link[disabled] {
  background-color: transparent;
  background-image: none;
  @include box-shadow(none);
}

a.romo-btn.romo-btn-link,
button.romo-btn.romo-btn-link { color: $linkColor; }
a.romo-btn.romo-btn-link:hover,
button.romo-btn.romo-btn-link:hover,
a.romo-btn.romo-btn-link:focus,
button.romo-btn.romo-btn-link:focus {
  color: $linkColorHover;
  text-decoration: underline;
  background-color: transparent;
}
a.romo-btn.romo-btn-link.disabled,
button.romo-btn.romo-btn-link.disabled,
.romo-btn.romo-btn-link.disabled,
a.romo-btn.romo-btn-link.disabled:hover,
button.romo-btn.romo-btn-link.disabled:hover,
.romo-btn.romo-btn-link.disabled:hover,
a.romo-btn.romo-btn-link.disabled:focus,
button.romo-btn.romo-btn-link.disabled:focus,
.romo-btn.romo-btn-link.disabled:focus,
a.romo-btn.romo-btn-link[disabled],
button.romo-btn.romo-btn-link[disabled],
.romo-btn.romo-btn-link[disabled],
a.romo-btn.romo-btn-link[disabled]:hover,
button.romo-btn.romo-btn-link[disabled]:hover,
.romo-btn.romo-btn-link[disabled]:hover,
a.romo-btn.romo-btn-link[disabled]:focus,
button.romo-btn.romo-btn-link[disabled]:focus,
.romo-btn.romo-btn-link[disabled]:focus { color: $disabledColor; }

.romo-btn-group { @include display-inline-flex(!important); }
.romo-btn-group > * { display: inherit; }

.romo-btn-group .romo-btn:not(:last-child) { @include rm-border-right; }

.romo-btn-group.romo-btn-group-border-radius  .romo-btn:first-child,
.romo-btn-group.romo-btn-group-border1-radius .romo-btn:first-child { @include border1-top-left-radius; @include border1-bottom-left-radius; }
.romo-btn-group.romo-btn-group-border0-radius .romo-btn:first-child { @include border0-top-left-radius; @include border0-bottom-left-radius; }
.romo-btn-group.romo-btn-group-border2-radius .romo-btn:first-child { @include border2-top-left-radius; @include border2-bottom-left-radius; }

.romo-btn-group.romo-btn-group-border-radius  .romo-btn:last-child,
.romo-btn-group.romo-btn-group-border1-radius .romo-btn:last-child { @include border1-top-right-radius; @include border1-bottom-right-radius; }
.romo-btn-group.romo-btn-group-border0-radius .romo-btn:last-child { @include border0-top-right-radius; @include border0-bottom-right-radius; }
.romo-btn-group.romo-btn-group-border2-radius .romo-btn:last-child { @include border2-top-right-radius; @include border2-bottom-right-radius; }

.romo-btn-group-vertical { display: inline-block; }
.romo-btn-group-vertical .romo-btn { display: block; max-width: 100%; }
.romo-btn-group-vertical .romo-btn:not(:last-child) { @include rm-border-bottom; }

.romo-btn-group-vertical.romo-btn-group-border-radius  .romo-btn:first-child,
.romo-btn-group-vertical.romo-btn-group-border1-radius .romo-btn:first-child { @include border1-top-left-radius; @include border1-top-right-radius; }
.romo-btn-group-vertical.romo-btn-group-border0-radius .romo-btn:first-child { @include border0-top-left-radius; @include border0-top-right-radius; }
.romo-btn-group-vertical.romo-btn-group-border2-radius .romo-btn:first-child { @include border2-top-left-radius; @include border2-top-right-radius; }

.romo-btn-group-vertical.romo-btn-group-border-radius  .romo-btn:last-child,
.romo-btn-group-vertical.romo-btn-group-border1-radius .romo-btn:last-child { @include border1-bottom-left-radius; @include border1-bottom-right-radius; }
.romo-btn-group-vertical.romo-btn-group-border0-radius .romo-btn:last-child { @include border0-bottom-left-radius; @include border0-bottom-right-radius; }
.romo-btn-group-vertical.romo-btn-group-border2-radius .romo-btn:last-child { @include border2-bottom-left-radius; @include border2-bottom-right-radius; }

.romo-btn-group .romo-btn-group-vertical:not(:last-child) .romo-btn { @include rm-border-right; }
.romo-btn-group .romo-btn-group-vertical:last-child .romo-btn { @include border1-right; }

.romo-btn-group.romo-btn-group-border-radius  .romo-btn-group-vertical .romo-btn,
.romo-btn-group.romo-btn-group-border1-radius .romo-btn-group-vertical .romo-btn { @include rm-border-radius; }
.romo-btn-group.romo-btn-group-border0-radius .romo-btn-group-vertical .romo-btn { @include rm-border-radius; }
.romo-btn-group.romo-btn-group-border2-radius .romo-btn-group-vertical .romo-btn { @include rm-border-radius; }

.romo-btn-group.romo-btn-group-border-radius  .romo-btn-group-vertical:first-child .romo-btn:first-child,
.romo-btn-group.romo-btn-group-border1-radius .romo-btn-group-vertical:first-child .romo-btn:first-child { @include border1-top-left-radius; }
.romo-btn-group.romo-btn-group-border0-radius .romo-btn-group-vertical:first-child .romo-btn:first-child { @include border0-top-left-radius; }
.romo-btn-group.romo-btn-group-border2-radius .romo-btn-group-vertical:first-child .romo-btn:first-child { @include border2-top-left-radius; }

.romo-btn-group.romo-btn-group-border-radius  .romo-btn-group-vertical:first-child .romo-btn:last-child,
.romo-btn-group.romo-btn-group-border1-radius .romo-btn-group-vertical:first-child .romo-btn:last-child { @include border1-bottom-left-radius; }
.romo-btn-group.romo-btn-group-border0-radius .romo-btn-group-vertical:first-child .romo-btn:last-child { @include border0-bottom-left-radius; }
.romo-btn-group.romo-btn-group-border2-radius .romo-btn-group-vertical:first-child .romo-btn:last-child { @include border2-bottom-left-radius; }

.romo-btn-group.romo-btn-group-border-radius  .romo-btn-group-vertical:last-child .romo-btn:first-child,
.romo-btn-group.romo-btn-group-border1-radius .romo-btn-group-vertical:last-child .romo-btn:first-child { @include border1-top-right-radius; }
.romo-btn-group.romo-btn-group-border0-radius .romo-btn-group-vertical:last-child .romo-btn:first-child { @include border0-top-right-radius; }
.romo-btn-group.romo-btn-group-border2-radius .romo-btn-group-vertical:last-child .romo-btn:first-child { @include border2-top-right-radius; }

.romo-btn-group.romo-btn-group-border-radius  .romo-btn-group-vertical:last-child .romo-btn:last-child,
.romo-btn-group.romo-btn-group-border1-radius .romo-btn-group-vertical:last-child .romo-btn:last-child { @include border1-bottom-right-radius; }
.romo-btn-group.romo-btn-group-border0-radius .romo-btn-group-vertical:last-child .romo-btn:last-child { @include border0-bottom-right-radius; }
.romo-btn-group.romo-btn-group-border2-radius .romo-btn-group-vertical:last-child .romo-btn:last-child { @include border2-bottom-right-radius; }