/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require bootstrap_and_overrides
 *= require chosen
 *= require_self
 *= require_tree .
 */

img.emoji {
  height: 4rem;
  width: auto;
  margin: -1rem 0;
  padding: 0.2rem;
}

/*  massages blue emoji hue to match .twitch-button */
.blue-to-purple {
  filter: hue-rotate(42deg) contrast(3.2) grayscale(0.6);
}

/*  Hide button background/border when using blue-to-purple 
    (implying an emoji-based button) */
button.blue-to-purple {
  padding: 0;
  border: 0;
  background: none;
}

/*  remove margins of emoji 
    inside of buttons so the 
    button fits its contents */
button .emoji {
  margin: 0;
}

/*  massages the hue to match
    .twitch-button's lighter hover state */
button.blue-to-purple:hover {
  filter: hue-rotate(42deg) contrast(2.2) grayscale(0.5);
}

/*  grayscale buttons when disabled */
button.blue-to-purple[disabled] {
  pointer-events: none;
  filter: hue-rotate(42deg) contrast(2.2) grayscale(1) !important;
}

.flag-holder {
  display: block;
}

.flex {
  display: flex;
}

.flex>.center-self {
  display: flex;
  align-self: center;
}

.no-pad,
.un-pad {
  padding: 0;
}

/* 
  Hide the footer when the window is short
*/
@media (max-height: 35.375rem) {
  .hidden-xs-v {
    display: none !important;
  }
}
