// *************************************
//
//   Buttons
//   -> Buttons on Dillinger.io
//
// -------------------------------------
//   Template (Haml)
// -------------------------------------
//
// .btn[.btn--modifier](.is-state)(.has-context)
//   .btn-scaffolding
//
// *************************************

.btn {
  text-align: center;
  display: inline-block;
  width: 100%;
  text-transform: uppercase;
  font-weight: map-get($headingtype, bold);
  font-family: map-get($headingtype, font-family);
  font-size: 14px;
  text-shadow: 0 1px 0 darken($c-highlight, 20%);
  padding: 16px 24px;
  background-color: $c-highlight;
  border-radius: 3px;
  margin: 0 auto 16px;
  line-height: 1;
  color: #fff;
  transition: all .15s linear;
  -webkit-font-smoothing: antialiased;

// -------------------------------------
//   Modifiers
// -------------------------------------

  &--new,
  &--save {
    display: block;
    width: 238px;

    &:hover,
    &:focus {
      color: #fff;
      border-bottom-color: transparent;
      box-shadow: 0 1px 3px darken($c-highlight, 10%);
      text-shadow: 0 1px 0 darken($c-highlight, 10%);;
    }
  }

  &--save {
    background-color: $c-button-save;
    text-shadow: 0 1px 1px darken($c-button-save, 20%);

    &:hover,
    &:focus {
      color: #fff;
      border-bottom-color: transparent;
      box-shadow: 0 1px 5px darken($c-button-save, 30%);
      text-shadow: none;
    }
  }

  &--delete {
    display: block;
    width: 238px;
    background-color: transparent;
    font-size: 12px;
    text-shadow: none;

    &:hover,
    &:focus {
      color: #fff;
      border-bottom-color: transparent;
      text-shadow: 0 1px 0 darken($c-button-save, 30%);
      opacity: 0.8;
    }
  }

  &--delete-modal,
  &--ok,
  &--close {
    border-top: 0;
    background-color: $c-button-save;
    text-shadow: 0 1px 0 darken($c-button-save, 30%);
    margin: 0;

    &:hover,
    &:focus {
      color: #fff;
      background-color: darken($c-button-save, 15%);
      text-shadow: none;
    }
  }

  &--delete-modal {
    display: inline;
    width: auto;
  }

// -------------------------------------
//   States
// -------------------------------------

// .btn.is-state

// -------------------------------------
//   Context
// -------------------------------------

// .has-btn

// -------------------------------------
//   Scaffolding
// -------------------------------------

// .btn-scaffolding
}