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

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

  Notes:
  Buttons must be used in tandem with a `button-wrap` class as follows.

  Usage Examples:
  // Normal Button
  <a class="button-wrap" href="#">
    <span class="button">Click here</span>
  </a>

  // Full Width Button
  <a class="button-wrap button-wrap-fullwidth" href="#">
    <span class="button">Click here</span>
  </a>

  // CTA Big Button
  <a class="button-wrap" href="#">
    <span class="button big cta">Click here</span>
  </a>

  // Button With Image
  <a class="button-wrap" href="#">
    <span class="button withimage">
      <img src="URL to Some icon" />
      Click here
    </span>
  </a>
---------------------------------------------------- */

/* ------------ 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] { cursor: default }
button[disabled] { opacity: .4 }

/* 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;
  text-decoration: none;
  cursor: pointer;
}

  .button:hover { background : #ccc; }

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

/* Big */
.button.big { font-size : 1em; line-height: 1.125 }

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

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

/* Default grey (Inactive state) */
.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 
  }

/* Dark Grey */
.button.dark { background: #555; color: #fff }
  .button.dark:hover { background: #444 }

/* 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; 
  }

/* ------------ SOCIAL MEDIA BUTTON STYLES --------------*/
.button.facebook, .button.facebook a { background : #4c6dcb }
.button.facebook:hover, .button.facebook a:hover { background : #3855a7 }
.button.twitter, .button.twitter a { background : #36c2f7 }
.button.twitter:hover, .button.twitter a:hover { background : #00aaea }
.button.whatsapp, .button.whatsapp a { background : #5cbe4a }
.button.whatsapp:hover, .button.whatsapp a:hover { background : #48a536 }
.button.email, .button.email a { background : #4c8ecb }
.button.email:hover, .button.email a:hover { background : #427eb5 }

.button.facebook, .button.facebook a, .button.facebook:hover, .button.facebook a:hover,
.button.twitter, .button.twitter a, .button.twitter:hover, .button.twitter a:hover,
.button.whatsapp, .button.whatsapp a, .button.whatsapp:hover, .button.whatsapp a:hover,
.button.email, .button.email a, .button.email:hover, .button.email a:hover { color : #fff }

.button-icon-social { 
	background-image : url(/images/core/consumer/game/button_socialmedia_icon_sprite.png); 
	display : inline-block; 
	width : 16px; height : 16px
}
  .button.facebook .button-icon-social { background-position : 0 0 }
  .button.twitter .button-icon-social { background-position : -16px 0 }
  .button.whatsapp .button-icon-social { background-position : -32px 0 }
  .button.email .button-icon-social { background-position : -48px 0 }
  

/* ------------ 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; }

/* ------------ 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;
	}

/* ----------------------------------------------------
  CUSTOM BUTTONS: SUPPORT FOR OLD PLAYER WEB
---------------------------------------------------- */
/* Vote button */
/* Use together with base button class above */
.votebutton { 
	width : 40px; 
	padding-left : 45px; 
	background : #ececec; color : #292929 
}
	
  .votebutton-status {
    background-image : url(/images/core/consumer/game/icon_vote.png); 
    background-position : 0 0;
    width : 20px; height : 16px;
    display : block; 
    position : absolute; 
    top : 12px; left : 16px;
  }
    .votebutton.voted .votebutton-status { background-position : -20px 0 }
    .votebutton.voted { background : #e4174b; color : #fff }
  
  /* Granular control for browsers with hover status */
  @media (hover: hover) and (pointer: fine) {
    .button.votebutton:hover { background: #ddd }
  }

/* Bookmark button */
/* Use as standalone */
.bookmarkbutton-circle {
  display : block; 
  position : relative; 
  width : 42px; height : 42px; 
  background: #ececec;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
}

/* Use together with base button class above */
.bookmarkbutton { 
	padding-left : 45px !important; 
	background : #ececec; color : #292929 
}
  .bookmarkbutton-status {
    background-image : url(/images/core/consumer/game/icon_bookmark.png); 
    background-position : 0 0;
    width : 20px; height : 20px; 
    display : block; 
    position : absolute;
  }

  .bookmarkbutton-circle .bookmarkbutton-status { top : 10px; left : 11px }
  .bookmarkbutton .bookmarkbutton-status { top : 10px; left : 16px }

  .bookmarkbutton-circle:hover, .bookmarkbutton-circle.bookmarked,
  .bookmarkbutton:hover, .bookmarkbutton.bookmarked { background : #ecd32b; color : #fff }
  .bookmarkbutton-circle:hover .bookmarkbutton-status, .bookmarkbutton-circle.bookmarked .bookmarkbutton-status,
  .bookmarkbutton:hover .bookmarkbutton-status, .bookmarkbutton.bookmarked .bookmarkbutton-status { background-position : -20px 0 }