/* -----------------------------------------------------------------------------
Engine:      Gametize
Author:     Gametize Pte Ltd
Description:  Button library
----------------------------------------------------------------------------- */

/* ----------------------------------------------------
          DEFAULT BUTTONS
---------------------------------------------------- */

/* ------------ BUTTON LINK WRAPS --------------*/

.button-wrap, .button-wrap:hover {display : inline-block;text-decoration: none!important;}
.button-wrap.button-wrap-fullwidth { width : 100% }

/* ------------ GENERAL BUTTON STYLE --------------*/

/* Disabled buttons */
button:disabled,
button.disabled,
.button.disabled {
  cursor: default;
  opacity: 0.6;
}

/* Default small grey button, suitable for light coloured backgrounds */
.button {
  display : block;
  position : relative;
  background: #ddd;
  padding : 12px 18px;
  font-size : 0.875em;
  line-height: 0.75;
  font-weight : 600;
  text-transform : capitalize;
  color : #292929;
  text-align : center;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
}

  .button:hover { background : #ccc; }

/* ------------ SIZES --------------*/

.button.giant {
  font-size: 1.5em; line-height: 1.25; padding: 20px 20px 16px;
  -moz-border-radius: 32px;
  -webkit-border-radius: 32px;
  border-radius: 32px;
}
  @media screen and (min-width: 768px) {
    .button.giant {
      padding: 20px 50px 16px;
    }
  }

.button.big { font-size : 1em; line-height: 1.125 }
.button.medium { font-size: 1em; line-height: 1; padding: 10px 16px 8px 16px }

/* ------------ OTHER LOGO BUTTON STYLES --------------*/
.button.slack, .button.slack a {
  background : #fff; color: #111;
  border: 1px solid #999;
}
.button.slack:hover, .button.slack a:hover { border: 1px solid #000; }

/* ------------ BUTTON COLOURS --------------*/

/* Green */
.button.cta { background: #85d02f; color: #fff }
  .button.cta:hover { background: #6fb81b }

/* Default grey */
.button.inactive { background: #afafaf; color : #fff }

/* Red */
.button.die { background: #d85656; color: #fff; font-weight: bold; text-shadow: 0px -1px 1px #8a8a8a }
  .button.die:hover { background: #ba2c2d; text-decoration: none }

/* Gametize Branded */
.button.gametize, .button.gametize a { background : #bb1853; color: #fff; }
.button.gametize:hover, .button.gametize a:hover { background : #ab1149; color: #fff; }
.button.gametize-inverted, .button.gametize-inverted a { background : transparent; border: 1px solid #bb1853; color: #bb1853; transition: all 0.5s;}
.button.gametize-inverted:hover, .button.gametize-inverted:hover a { border: 1px solid #bb1853; background: #bb1853; color: #fff; }

/* ------------ BUTTONS WITH IMAGES --------------*/

.button.withimage, .button.big.withimage { padding-left : 40px }
  .button.withimage img, .button.withimage .fa {
    position : absolute;
    top : 10px; left : 15px;
    max-width: 15px; max-height: 15px;
  }
  .button.big.withimage img, .button.big.withimage .fa {
    top : 12px;
    max-width: 18px; max-height: 18px;
  }