@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($btnBg, $btnBgHover, $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%; }

/* emphasis colored buttons */

a.romo-btn.romo-btn-alt,     button.romo-btn.romo-btn-alt,     .romo-btn.romo-btn-alt     { @include button-bg($btnAltBg,     $btnAltBgHover,     $btnAltColor);     }
a.romo-btn.romo-btn-inverse, button.romo-btn.romo-btn-inverse, .romo-btn.romo-btn-inverse { @include button-bg($btnInverseBg, $btnInverseBgHover, $btnInverseColor); }
a.romo-btn.romo-btn-warning, button.romo-btn.romo-btn-warning, .romo-btn.romo-btn-warning { @include button-bg($btnWarningBg, $btnWarningBgHover, $btnWarningColor); }
a.romo-btn.romo-btn-danger,  button.romo-btn.romo-btn-danger,  .romo-btn.romo-btn-danger  { @include button-bg($btnDangerBg,  $btnDangerBgHover,  $btnDangerColor);  }
a.romo-btn.romo-btn-info,    button.romo-btn.romo-btn-info,    .romo-btn.romo-btn-info    { @include button-bg($btnInfoBg,    $btnInfoBgHover,    $btnInfoColor);    }
a.romo-btn.romo-btn-success, button.romo-btn.romo-btn-success, .romo-btn.romo-btn-success { @include button-bg($btnSuccessBg, $btnSuccessBgHover, $btnSuccessColor); }

/* explicit colored buttons */

a.romo-btn.romo-btn-dark-red,      button.romo-btn.romo-btn-dark-red,      .romo-btn.romo-btn-dark-red      { @include button-bg($btnDarkRedBg,      $btnDarkRedBgHover,      $btnDarkRedColor);      }
a.romo-btn.romo-btn-red,           button.romo-btn.romo-btn-red,           .romo-btn.romo-btn-red           { @include button-bg($btnRedBg,          $btnRedBgHover,          $btnRedColor);          }
a.romo-btn.romo-btn-light-red,     button.romo-btn.romo-btn-light-red,     .romo-btn.romo-btn-light-red     { @include button-bg($btnLightRedBg,     $btnLightRedBgHover,     $btnLightRedColor);     }
a.romo-btn.romo-btn-pastel-red,    button.romo-btn.romo-btn-pastel-red,    .romo-btn.romo-btn-pastel-red    { @include button-bg($btnPastelRedBg,    $btnPastelRedBgHover,    $btnPastelRedColor);    }
a.romo-btn.romo-btn-dark-orange,   button.romo-btn.romo-btn-dark-orange,   .romo-btn.romo-btn-dark-orange   { @include button-bg($btnDarkOrangeBg,   $btnDarkOrangeBgHover,   $btnDarkOrangeColor);   }
a.romo-btn.romo-btn-orange,        button.romo-btn.romo-btn-orange,        .romo-btn.romo-btn-orange        { @include button-bg($btnOrangeBg,       $btnOrangeBgHover,       $btnOrangeColor);       }
a.romo-btn.romo-btn-yellow,        button.romo-btn.romo-btn-yellow,        .romo-btn.romo-btn-yellow        { @include button-bg($btnYellowBg,       $btnYellowBgHover,       $btnYellowColor);       }
a.romo-btn.romo-btn-pastel-yellow, button.romo-btn.romo-btn-pastel-yellow, .romo-btn.romo-btn-pastel-yellow { @include button-bg($btnPastelYellowBg, $btnPastelYellowBgHover, $btnPastelYellowColor); }
a.romo-btn.romo-btn-purple,        button.romo-btn.romo-btn-purple,        .romo-btn.romo-btn-purple        { @include button-bg($btnPurpleBg,       $btnPurpleBgHover,       $btnPurpleColor);       }
a.romo-btn.romo-btn-light-purple,  button.romo-btn.romo-btn-light-purple,  .romo-btn.romo-btn-light-purple  { @include button-bg($btnLightPurpleBg,  $btnLightPurpleBgHover,  $btnLightPurpleColor);  }
a.romo-btn.romo-btn-dark-pink,     button.romo-btn.romo-btn-dark-pink,     .romo-btn.romo-btn-dark-pink     { @include button-bg($btnDarkPinkBg,     $btnDarkPinkBgHover,     $btnDarkPinkColor);     }
a.romo-btn.romo-btn-hot-pink,      button.romo-btn.romo-btn-hot-pink,      .romo-btn.romo-btn-hot-pink      { @include button-bg($btnHotPinkBg,      $btnHotPinkBgHover,      $btnHotPinkColor);      }
a.romo-btn.romo-btn-pink,          button.romo-btn.romo-btn-pink,          .romo-btn.romo-btn-pink          { @include button-bg($btnPinkBg,         $btnPinkBgHover,         $btnPinkColor);         }
a.romo-btn.romo-btn-dark-green,    button.romo-btn.romo-btn-dark-green,    .romo-btn.romo-btn-dark-green    { @include button-bg($btnDarkGreenBg,    $btnDarkGreenBgHover,    $btnDarkGreenColor);    }
a.romo-btn.romo-btn-green,         button.romo-btn.romo-btn-green,         .romo-btn.romo-btn-green         { @include button-bg($btnGreenBg,        $btnGreenBgHover,        $btnGreenColor);        }
a.romo-btn.romo-btn-light-green,   button.romo-btn.romo-btn-light-green,   .romo-btn.romo-btn-light-green   { @include button-bg($btnLightGreenBg,   $btnLightGreenBgHover,   $btnLightGreenColor);   }
a.romo-btn.romo-btn-pastel-green,  button.romo-btn.romo-btn-pastel-green,  .romo-btn.romo-btn-pastel-green  { @include button-bg($btnPastelGreenBg,  $btnPastelGreenBgHover,  $btnPastelGreenColor);  }
a.romo-btn.romo-btn-navy,          button.romo-btn.romo-btn-navy,          .romo-btn.romo-btn-navy          { @include button-bg($btnNavyBg,         $btnNavyBgHover,         $btnNavyColor);         }
a.romo-btn.romo-btn-dark-blue,     button.romo-btn.romo-btn-dark-blue,     .romo-btn.romo-btn-dark-blue     { @include button-bg($btnDarkBlueBg,     $btnDarkBlueBgHover,     $btnDarkBlueColor);     }
a.romo-btn.romo-btn-blue,          button.romo-btn.romo-btn-blue,          .romo-btn.romo-btn-blue          { @include button-bg($btnBlueBg,         $btnBlueBgHover,         $btnBlueColor);         }
a.romo-btn.romo-btn-light-blue,    button.romo-btn.romo-btn-light-blue,    .romo-btn.romo-btn-light-blue    { @include button-bg($btnLightBlueBg,    $btnLightBlueBgHover,    $btnLightBlueColor);    }
a.romo-btn.romo-btn-pastel-blue,   button.romo-btn.romo-btn-pastel-blue,   .romo-btn.romo-btn-pastel-blue   { @include button-bg($btnPastelBlueBg,   $btnPastelBlueBgHover,   $btnPastelBlueColor);   }

/* link buttons */

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; }