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

.romo {

  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 border-radius(0px);
    @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; }

}