.container
  div.button-wrap
    input(type="radio" name="accept-offers" id="yes-button" class="hidden radio-label" checked)
    label(for="yes-button" class="button-label")
      h1 Yes
    input(type="radio" name="accept-offers" id="no-button" class="hidden radio-label")
    label(for="no-button" class="button-label")
      h1 No
    input(type="radio" name="accept-offers" id="maybe-button" class="hidden radio-label")
    label(for="maybe-button" class="button-label")
      h1 Maybe

@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Lato:300,400,900);

$dark: #292929;
$light: #efefef;
$red: #D91E18;
$green: #2ECC71;
$blue: #4183D7;
$font-stack: "Lato", sans-serif;
$small: 40em;

* {
  box-sizing: border-box;
}
  
html, body {
  height: 100%;
}

html {
  background: #444;
}

body {
  min-height: 100%;
  overflow: hidden;
}

.container {
  height: 100%;
  min-height: 100%;
  margin: 0 auto;
}

.button-wrap {
  position: relative;
  text-align: center;
  top: 50%;
  margin-top: -2.5em;
  @media (max-width: $small) {margin-top: -1.5em;}
}

.button-label {
  display: inline-block;
  padding: 1em 2em;
  margin: 0.5em;
  cursor: pointer;
  color: $dark;
  border-radius: 0.25em;
  background: $light;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2), inset 0 -3px 0 rgba(0,0,0,0.22);
  transition: 0.3s;
  user-select: none;
  h1 {
    font-size: 1em;
    font-family: $font-stack;
  }
  &:hover {
    background: darken($light, 10%);
    color: darken($dark, 10%);
    box-shadow: 0 3px 10px rgba(0,0,0,0.2), inset 0 -3px 0 rgba(0,0,0,0.32);
  }
  &:active {
    transform: translateY(2px);
    box-shadow: 0 3px 10px rgba(0,0,0,0.2), inset 0px -1px 0 rgba(0,0,0,0.22); 
  }
  @media (max-width: $small) {
    padding: 0em 1em 3px;
    margin: 0.25em;
  }
}

#yes-button:checked + .button-label {
  background: $green;
  color: $light;
  &:hover {
    background: darken($green, 5%);
    color: darken($light, 5%);
  }
}

#no-button:checked + .button-label {
  background: $red;
  color: $light;
  &:hover {
    background: darken($red, 5%);
    color: darken($light, 5%);
  }
}

#maybe-button:checked + .button-label {
  background: $blue;
  color: $light;
  &:hover {
    background: darken($blue, 5%);
    color: darken($light, 5%);
  }
}

.hidden {
  display: none;
}