/*
<Poker Chips Style By Codepen user PMK: "https://codepen.io/pmk/popular/"
*/

:root {
  --outer-dim-1: 50.3px;
  --outer-dim-2: 39px;
  --outer-dim-3: 37px;
  --font-size-1: 16.7px;
  --before-top-left: 3px;
  --after-top-left: 6.7px;
  --stripe-1: 22.5px;
  --stripe-2: 27.8px;
  --stripe-3: 32.5px;
  --stripe-4: 37.8px;
  --stripe-5: 23.2px;
  --stripe-6: 27.2px;
  --stripe-7: 32.9px;
  --stripe-8: 36.9px;
  --border: 2.7px;
}
.pokerchip {
  margin: 1px;
  position: relative;
  display: inline-block;
  width: var(--outer-dim-1);
  height: var(--outer-dim-1);
  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.5), 0 0 3px 0 rgba(0, 0, 0, 0.4) inset;
  border-radius: 50%;
  background-size: var(--outer-dim-1) var(--outer-dim-1);
  background-position: center center;
  cursor: pointer;
}

.pokerchip:hover {
  transform: scale(1.1);
}

.pokerchip:before {
  position: absolute;
  content: "";
  z-index: 1;
  width: var(--outer-dim-2);
  height: var(--outer-dim-2);
  border-radius: 50%;
  top: var(--before-top-left);
  left: var(--before-top-left);
  background-size: var(--outer-dim-1) var(--outer-dim-1);
  background-position: center center;
}

.pokerchip:after {
  z-index: 2;
  position: absolute;
  text-align: center;
  font: bold var(--font-size-1)/var(--outer-dim-3) Arial;
  white-space: pre;
  width: var(--outer-dim-3);
  height: var(--outer-dim-3);
  border-radius: 50%;
  top: var(--after-top-left);
  left: var(--after-top-left);
  text-shadow: -1px -1px 0px rgba(0, 0, 0, 0.3), 1px 1px 0px rgba(255, 255, 255, 0.2);
}

/* Colors */
.white {
  background-image: linear-gradient(0deg, transparent 0, transparent var(--stripe-1), 
  #fff var(--stripe-1), #fff var(--stripe-2), transparent var(--stripe-2), 
  transparent var(--outer-dim-1)), linear-gradient(60deg, transparent 0, 
  transparent var(--stripe-3), #fff var(--stripe-3),#fff var(--stripe-4), 
  transparent var(--stripe-4), transparent var(--outer-dim-1)), 
  linear-gradient(120deg,#F1F1F1 0, #F1F1F1 var(--stripe-3), 
  #fff var(--stripe-3), #fff var(--stripe-4),#F1F1F1 var(--stripe-4), 
  #F1F1F1 var(--outer-dim-1));
}
.white:before {
  border: var(--border) solid #F1F1F1;
  background-image: linear-gradient(0deg, transparent 0, transparent var(--stripe-5), 
  #EBEBEB var(--stripe-5), #EBEBEB var(--stripe-6), transparent var(--stripe-6), transparent var(--outer-dim-1)), 
  linear-gradient(30deg, transparent 0, transparent var(--stripe-7), #EBEBEB var(--stripe-7), 
  #EBEBEB var(--stripe-8), transparent var(--stripe-8), transparent var(--outer-dim-1)), 
  linear-gradient(60deg, transparent 0, transparent var(--stripe-7), #EBEBEB var(--stripe-7), 
  #EBEBEB var(--stripe-8), transparent var(--stripe-8), transparent var(--outer-dim-1)), 
  linear-gradient(90deg, transparent 0, transparent var(--stripe-5), #EBEBEB var(--stripe-5), 
  #EBEBEB var(--stripe-6), transparent var(--stripe-6), transparent var(--outer-dim-1)), 
  linear-gradient(120deg, transparent 0, transparent var(--stripe-7), #EBEBEB var(--stripe-7), 
  #EBEBEB var(--stripe-8), transparent var(--stripe-8), transparent var(--outer-dim-1)), 
  linear-gradient(150deg, #C1C1C1 0, #C1C1C1 var(--stripe-7), #EBEBEB var(--stripe-7), 
  #EBEBEB var(--stripe-8), #C1C1C1 var(--stripe-8), #C1C1C1 var(--outer-dim-1));
}
.white:after {
  content: "CLR";
  background: #F1F1F1;
  color: #C1C1C1;
  font-size: 12pt;
}

.blue {
  background-image: linear-gradient(0deg, transparent 0, transparent var(--stripe-1), 
  #fff var(--stripe-1), #fff var(--stripe-2), transparent var(--stripe-2), 
  transparent var(--outer-dim-1)), linear-gradient(60deg, transparent 0, 
  transparent var(--stripe-3), #fff var(--stripe-3),#fff var(--stripe-4), 
  transparent var(--stripe-4), transparent var(--outer-dim-1)), 
  linear-gradient(120deg,#479AE7 0, #479AE7 var(--stripe-3), 
  #fff var(--stripe-3), #fff var(--stripe-4),#479AE7 var(--stripe-4), 
  #479AE7 var(--outer-dim-1));
}
.blue:before {
  border: var(--border) solid #479AE7;
  background-image: linear-gradient(0deg, transparent 0, transparent var(--stripe-5), 
  #EBEBEB var(--stripe-5), #EBEBEB var(--stripe-6), transparent var(--stripe-6), transparent var(--outer-dim-1)), 
  linear-gradient(30deg, transparent 0, transparent var(--stripe-7), #EBEBEB var(--stripe-7), 
  #EBEBEB var(--stripe-8), transparent var(--stripe-8), transparent var(--outer-dim-1)), 
  linear-gradient(60deg, transparent 0, transparent var(--stripe-7), #EBEBEB var(--stripe-7), 
  #EBEBEB var(--stripe-8), transparent var(--stripe-8), transparent var(--outer-dim-1)), 
  linear-gradient(90deg, transparent 0, transparent var(--stripe-5), #EBEBEB var(--stripe-5), 
  #EBEBEB var(--stripe-6), transparent var(--stripe-6), transparent var(--outer-dim-1)), 
  linear-gradient(120deg, transparent 0, transparent var(--stripe-7), #EBEBEB var(--stripe-7), 
  #EBEBEB var(--stripe-8), transparent var(--stripe-8), transparent var(--outer-dim-1)), 
  linear-gradient(150deg, #C1C1C1 0, #C1C1C1 var(--stripe-7), #EBEBEB var(--stripe-7), 
  #EBEBEB var(--stripe-8), #C1C1C1 var(--stripe-8), #C1C1C1 var(--outer-dim-1));
}
.blue:after {
  content: "1";
  background: #479AE7;
  color: #C1C1C1;
}
.red {
  background-image: linear-gradient(0deg, transparent 0, transparent var(--stripe-1), 
  #fff var(--stripe-1), #fff var(--stripe-2), transparent var(--stripe-2), transparent var(--outer-dim-1)), 
  linear-gradient(60deg, transparent 0, transparent var(--stripe-3), #fff var(--stripe-3), 
  #fff var(--stripe-4), transparent var(--stripe-4), transparent var(--outer-dim-1)), 
  linear-gradient(120deg, #B42A2D 0, #B42A2D var(--stripe-3), #fff var(--stripe-3), 
  #fff var(--stripe-4), #B42A2D var(--stripe-4), #B42A2D var(--outer-dim-1));
}
.red:before {
  border: var(--border) solid #B42A2D;
  background-image: linear-gradient(0deg, transparent 0, transparent var(--stripe-5), 
  #EBEBEB var(--stripe-5), #EBEBEB var(--stripe-6), transparent var(--stripe-6), transparent var(--outer-dim-1)), 
  linear-gradient(30deg, transparent 0, transparent var(--stripe-7), #EBEBEB var(--stripe-7), 
  #EBEBEB var(--stripe-8), transparent var(--stripe-8), transparent var(--outer-dim-1)), 
  linear-gradient(60deg, transparent 0, transparent var(--stripe-7), #EBEBEB var(--stripe-7), 
  #EBEBEB var(--stripe-8), transparent var(--stripe-8), transparent var(--outer-dim-1)), 
  linear-gradient(90deg, transparent 0, transparent var(--stripe-5), #EBEBEB var(--stripe-5), 
  #EBEBEB var(--stripe-6), transparent var(--stripe-6), transparent var(--outer-dim-1)), 
  linear-gradient(120deg, transparent 0, transparent var(--stripe-7), #EBEBEB var(--stripe-7), 
  #EBEBEB var(--stripe-8), transparent var(--stripe-8), transparent var(--outer-dim-1)), 
  linear-gradient(150deg, #6C0000 0, #6C0000 var(--stripe-7), #EBEBEB var(--stripe-7), 
  #EBEBEB var(--stripe-8), #6C0000 var(--stripe-8), #6C0000 var(--outer-dim-1));
}
.red:after {
  content: "5";
  background: #B42A2D;
  color: #6C0000;
}

.green {
  background-image: linear-gradient(0deg, transparent 0, transparent var(--stripe-1), 
  #fff var(--stripe-1), #fff var(--stripe-2), transparent var(--stripe-2), transparent var(--outer-dim-1)), 
  linear-gradient(60deg, transparent 0, transparent var(--stripe-3), #fff var(--stripe-3), 
  #fff var(--stripe-4), transparent var(--stripe-4), transparent var(--outer-dim-1)), 
  linear-gradient(120deg, #008000 0, #008000 var(--stripe-3), #fff var(--stripe-3), 
  #fff var(--stripe-4), #008000 var(--stripe-4), #008000 var(--outer-dim-1));
}
.green:before {
  border: var(--border) solid #008000;
  background-image: linear-gradient(0deg, transparent 0, transparent var(--stripe-5), 
  #EBEBEB var(--stripe-5), #EBEBEB var(--stripe-6), transparent var(--stripe-6), transparent var(--outer-dim-1)), 
  linear-gradient(30deg, transparent 0, transparent var(--stripe-7), #EBEBEB var(--stripe-7), 
  #EBEBEB var(--stripe-8), transparent var(--stripe-8), transparent var(--outer-dim-1)), 
  linear-gradient(60deg, transparent 0, transparent var(--stripe-7), #EBEBEB var(--stripe-7), 
  #EBEBEB var(--stripe-8), transparent var(--stripe-8), transparent var(--outer-dim-1)), 
  linear-gradient(90deg, transparent 0, transparent var(--stripe-5), #EBEBEB var(--stripe-5), 
  #EBEBEB var(--stripe-6), transparent var(--stripe-6), transparent var(--outer-dim-1)), 
  linear-gradient(120deg, transparent 0, transparent var(--stripe-7), #EBEBEB var(--stripe-7), 
  #EBEBEB var(--stripe-8), transparent var(--stripe-8), transparent var(--outer-dim-1)), 
  linear-gradient(150deg, #016C00 0, #016C00 var(--stripe-7), #EBEBEB var(--stripe-7), 
  #EBEBEB var(--stripe-8), #016C00 var(--stripe-8), #016C00 var(--outer-dim-1));
}
.green:after {
  content: "25";
  background: #008000;
  color: #016C00;
}
.black {
  background-image: linear-gradient(0deg, transparent 0, transparent var(--stripe-1),
  #7E5884 var(--stripe-1), #7E5884 var(--stripe-2), transparent var(--stripe-2), transparent var(--outer-dim-1)), 
  linear-gradient(60deg, transparent 0, transparent var(--stripe-3), #7E5884 var(--stripe-3),
  #7E5884 var(--stripe-4), transparent var(--stripe-4), transparent var(--outer-dim-1)), 
  linear-gradient(120deg, #222222 0, #222222 var(--stripe-3), #7E5884 var(--stripe-3),
  #7E5884 var(--stripe-4), #222222 var(--stripe-4), #222222 var(--outer-dim-1));
}
.black:before {
  border: var(--border) solid #222222;
  background-image: linear-gradient(0deg, transparent 0, transparent var(--stripe-5), 
  #EBEBEB var(--stripe-5), #EBEBEB var(--stripe-6), transparent var(--stripe-6), transparent var(--outer-dim-1)), 
  linear-gradient(30deg, transparent 0, transparent var(--stripe-7), #EBEBEB var(--stripe-7), 
  #EBEBEB var(--stripe-8), transparent var(--stripe-8), transparent var(--outer-dim-1)), 
  linear-gradient(60deg, transparent 0, transparent var(--stripe-7), #EBEBEB var(--stripe-7), 
  #EBEBEB var(--stripe-8), transparent var(--stripe-8), transparent var(--outer-dim-1)), 
  linear-gradient(90deg, transparent 0, transparent var(--stripe-5), #EBEBEB var(--stripe-5), 
  #EBEBEB var(--stripe-6), transparent var(--stripe-6), transparent var(--outer-dim-1)), 
  linear-gradient(120deg, transparent 0, transparent var(--stripe-7), #EBEBEB var(--stripe-7), 
  #EBEBEB var(--stripe-8), transparent var(--stripe-8), transparent var(--outer-dim-1)), 
  linear-gradient(150deg, #000000 0, #000000 var(--stripe-7), #EBEBEB var(--stripe-7), 
  #EBEBEB var(--stripe-8), #000000 var(--stripe-8), #000000 var(--outer-dim-1));
}
.black:after {
  content: "100";
  background:#222222; 
  color: #000000; /*#0000000*/
}
.purple {
  background-image: linear-gradient(0deg, transparent 0, transparent var(--stripe-1),
    #FBED98 var(--stripe-1), #FBED98 var(--stripe-2), transparent var(--stripe-2), transparent var(--outer-dim-1)),
    linear-gradient(60deg, transparent 0, transparent var(--stripe-3), #FBED98 var(--stripe-3),
    #FBED98 var(--stripe-4), transparent var(--stripe-4), transparent var(--outer-dim-1)),
    linear-gradient(120deg,#7E5884 0, #7E5884 var(--stripe-3), #FBED98 var(--stripe-3),
    #FBED98 var(--stripe-4),#7E5884 var(--stripe-4), #7E5884 var(--outer-dim-1));
}
.purple:before {
  border: var(--border) solid #7E5884;
  background-image: linear-gradient(0deg, transparent 0, transparent var(--stripe-5), 
  #77ABC3 var(--stripe-5), #77ABC3 var(--stripe-6), transparent var(--stripe-6), transparent var(--outer-dim-1)), 
  linear-gradient(30deg, transparent 0, transparent var(--stripe-7), #77ABC3 var(--stripe-7), 
  #77ABC3 var(--stripe-8), transparent var(--stripe-8), transparent var(--outer-dim-1)), 
  linear-gradient(60deg, transparent 0, transparent var(--stripe-7), #77ABC3 var(--stripe-7), 
  #77ABC3 var(--stripe-8), transparent var(--stripe-8), transparent var(--outer-dim-1)), 
  linear-gradient(90deg, transparent 0, transparent var(--stripe-5), #77ABC3 var(--stripe-5), 
  #77ABC3 var(--stripe-6), transparent var(--stripe-6), transparent var(--outer-dim-1)), linear-gradient(120deg, 
  transparent 0, transparent var(--stripe-7), #77ABC3 var(--stripe-7), #77ABC3 var(--stripe-8), 
  transparent var(--stripe-8), transparent var(--outer-dim-1)), linear-gradient(150deg, #664C68 0, 
  #664C68 var(--stripe-7), #77ABC3 var(--stripe-7), #77ABC3 var(--stripe-8), #664C68 var(--stripe-8), 
  #664C68 var(--outer-dim-1));
}
.purple:after {
  content: "500";
  background: #7E5884;
  color: #664C68;
}

.yellow {
  background-image: linear-gradient(0deg, transparent 0, transparent var(--stripe-1),
  #3E7F2D var(--stripe-1), #3E7F2D var(--stripe-2), transparent var(--stripe-2), transparent var(--outer-dim-1)),
  linear-gradient(60deg, transparent 0, transparent var(--stripe-3), #3E7F2D var(--stripe-3),
  #3E7F2D var(--stripe-4), transparent var(--stripe-4), transparent var(--outer-dim-1)),
  linear-gradient(120deg,#FBED98 0, #FBED98 var(--stripe-3), #3E7F2D var(--stripe-3),
  #3E7F2D var(--stripe-4),#FBED98 var(--stripe-4), #FBED98 var(--outer-dim-1));
}
.yellow:before {
  border: var(--border) solid #FBED98;
  background-image: linear-gradient(0deg, transparent 0, transparent var(--stripe-5), 
  #77ABC3 var(--stripe-5), #77ABC3 var(--stripe-6), transparent var(--stripe-6), transparent var(--outer-dim-1)), 
  linear-gradient(30deg, transparent 0, transparent var(--stripe-7), #77ABC3 var(--stripe-7), 
  #77ABC3 var(--stripe-8), transparent var(--stripe-8), transparent var(--outer-dim-1)), 
  linear-gradient(60deg, transparent 0, transparent var(--stripe-7), #77ABC3 var(--stripe-7), 
  #77ABC3 var(--stripe-8), transparent var(--stripe-8), transparent var(--outer-dim-1)), 
  linear-gradient(90deg, transparent 0, transparent var(--stripe-5), #77ABC3 var(--stripe-5), 
  #77ABC3 var(--stripe-6), transparent var(--stripe-6), transparent var(--outer-dim-1)), linear-gradient(120deg, 
  transparent 0, transparent var(--stripe-7), #77ABC3 var(--stripe-7), #77ABC3 var(--stripe-8), 
  transparent var(--stripe-8), transparent var(--outer-dim-1)), linear-gradient(150deg, #CBCB6A 0, 
  #CBCB6A var(--stripe-7), #77ABC3 var(--stripe-7), #77ABC3 var(--stripe-8), #CBCB6A var(--stripe-8), 
  #CBCB6A var(--outer-dim-1));
}
.yellow:after {
  content: "1000";
  background: #FBED98;
  color: #CBCB6A;
}


.pukOff:before {
  border: var(--border) solid #222222;
}
.pukOff:after {
  content: "Off";
  background: #222222;
  color:white;
}
.pukOn:before {
  border: var(--border) solid #222222;
}
.pukOn:after {
  content: "ON";
  background: white;
  color:black;
}
.scaled {
  transform: scale(0.5);
}