// ===================================
//         Groundwork Buttons
// ===================================




button, .button, a.button, a.button:link, a.button:visited, input[type=submit],  input[type=button], input[type=reset] {
  display:inline-block;
  word-wrap:break-word;
  padding:0.25em 1em;
  background:$button-color;
  border:1px solid $button-active;
  color:$button-text;
  font-weight:bold;
  font-size:1em;
  text-decoration:none;
  cursor:pointer;
  line-height:1.5;
  @include transition(background-color 0.25s ease-out);
  @include rounded($radius);
  &:hover, &:focus {
    background:$button-active;
    text-decoration:none;
    color:$button-active-text;
  }
  &.active, &.active:hover, &.active:focus {
    background:$button-active;
    color:$button-active-text;
  }
  &.disabled {
    background:lighten(gray, 15%);
    border-color:gray;
    color:lighten(gray, 35%);
    cursor:not-allowed;
    text-decoration:none;
  }
  &.small {
    font-size:0.8em;
  }
  &.large {
    font-size:1.5em;
  }
  &.error {
    background:$error-color;
    border:1px solid darken($error-color, 10%);
    color:$button-text;
    &:hover, &:focus {
      background:darken($error-color, 10%);
    }
  }
  &.warning {
    background:$warning-color;
    border:1px solid darken($warning-color, 10%);
    color:$button-text;
    &:hover, &:focus {
      background:darken($warning-color, 10%);
    }
  }
  &.success {
    background:$success-color;
    border:1px solid darken($success-color, 10%);
    color:$button-text;
    &:hover, &:focus {
      background:darken($success-color, 10%);
    }
  }
  &.square {
    @include rounded(0);
  }
  &.round {
    @include rounded(9999px);
  }
  &.block {
    display:block;
    width:100%;
    text-align:center;
  }
  &.dropdown {
    position:relative;
    padding-right:2em;
    &:after {
      content:'...';
      position:absolute;
      right:1em;
      bottom:0.25em;
    }
    &:hover ul, &:focus ul {
      display:block;
    }
    ul {
      margin:0.3em 0 0;
      padding:0;
      list-style:none;
      display:none;
      background:white;
      border:1px solid $border-color;
      position:absolute;
      left:0;
      width:100%;
      z-index:10;
      font-size:0.9em;
      @include rounded(0 0 $radius $radius);
      li {
        display:block;
        a, a:link, a:visited {
          display:block;
          padding:0.5em 1em;
          border:none;
          text-shadow:none;
          text-decoration:none;
          &:hover, &:focus {
            background:#efefef;
          }
        }
        &:last-child {
          @include rounded(0 0 $radius $radius);
        }
      }
      hr {
        margin:0;
        border-color:#ececec;
      }
    }
  }
}
ul.button-list, ol.button-list {
  list-style:none;
  margin:0;
  padding:0;
  &:after {
    content:'';
    display:block;
    clear:both;
  }
  li {
    display:block;
    float:left;
    margin:0;
    border-radius:0;
    &:first-child a {
      border-radius:$radius 0 0 $radius;
    }
    &:last-child a {
      border-radius:0 $radius $radius 0;
    }
    a {
      display:block;
      word-wrap:break-word;
      padding:0.25em 1em;
      background:$button-color;
      border:1px solid $button-active;
      color:$button-text;
      font-weight:bold;
      font-size:1em;
      text-decoration:none;
      cursor:pointer;
      line-height:1.5;
      @include transition(background-color 0.25s ease-out);
      &:hover, &:focus {
        background:$button-active;
        text-decoration:none;
        color:$button-active-text;
        border:1px solid $button-active;
      }
      &.active, &.active:hover, &.active:focus {
        background:$button-active;
        color:$button-active-text;
      }
      &.disabled {
        background:lighten(gray, 15%);
        border-color:gray;
        color:lighten(gray, 35%);
        cursor:not-allowed;
      }
    }
  }
}