/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 22-10-2022
/* colors   -> #EE741D | rgba(238,116,29) | hsla(25,86%,53%) */
/* ------------------------------------------------------------------------------ */
/* link     -> https://codepen.io/MarkBoots/pen/rNKaNEY */
/* info     -> clock2digital */
/* ------------------------------------------------------------------------------ */
/* ROOT and VARIBLES */
:root {
	--hover-bgr:hsla(210,100%,56%,1);
    
    /* cards */
    --card-front-col: rgba(0,0,0,.6); /* black, gray OR client-color */
    --card-front-bgr: #fff;
    --card-back-col: #fff;
    --card-back-bgr: #EE741D;
    --card-ibox-hgt: 14rem;         /* min-height of the card - depends of the text card-back - def 14rem */
    --card-body-bdr: 1px solid rgba(0,0,0,.05);     /* border - def 1px */
    /* grid-area */
    --grid-area-gap: 1rem;          /* gap between flipboxes - def 1rem | min .3rem - check used shadow */
    --grid-area-pad: 1rem;          /* padding - check card-border-radius - def 1rem | min .3rem */
    --grid-area-bgr: none;          /* background - def none */
    --grid-area-bdr: 0px solid rgba(0,0,0,.25);     /* border - def 0px  */
    --grid-area-rad: 0rem;          /* border-radius - def 0rem */
    /* counter - card-front */ 
    --count-color: rgb(255,255,255,1);  /* color of the counter - must be the same as card-back-background AND no transparent */
    --count-size: 2.2rem;                 /* counter size - def 4rem */
    --count-pos-top:1.4rem;                  /* counter position top - def 1rem */
    /*--count-pos-right:1rem;             /* counter position right - def 1.2rem */
    --count-pos-left:1rem;       /* counter position left - NOT IN USE */
    /*--count-pos-bottom: -70%;     /* counter position bottom - NOT IN USE */ 
    --count-width: 1px;             /* counter stroke - def 1px | max 3px */
    /* animation */
    --time-flip: 0.8s;              /* def 0.8s */
	}

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 26-10-22 */
/* RESET COUNTER -> SEE design.css */
/* CLOCK2DIGITAL */

* { margin: 0; padding: 0; box-sizing: border-box }
body { 
  min-height: 90vh;
  display: grid;
  place-items: center;
  background-color: #060606;
}
.clock {
  display: flex; 
  gap: calc(var(--segment-length) / 2);
  --segment-width: 2vmin;
  --segment-length: 6vmin;
  --segment-gap: .75vmin;
  --segment-color: #1D1E22;
  --segment-color-active: red;
  --colon-color: white;
  transform: skew(-15deg)
}
.colon {
  display: grid;
  width: var(--segment-width);
  gap: var(--segment-width);
  align-self: center;
}
.colon::before, .colon::after{
  content: "";
  aspect-ratio: 1;
  background-color: var(--colon-color);
  border-radius: 50%;
}
.digit {
  display: grid;
  gap: var(--segment-gap);
  grid-template:
    '.... r1c2 ....' var(--segment-width)
    'r2c1 .... r2c3' var(--segment-length)
    '.... r3c2 ....' var(--segment-width)
    'r4c1 .... r4c3' var(--segment-length)
    '.... r5c2 ....' var(--segment-width) /
    var(--segment-width) var(--segment-length) var(--segment-width)
}
.digit > div {
  grid-area: var(--ga);
  position: relative;
}
.digit > div::after{
  content: "";
  position: absolute;
  background: var(--bg, var(--segment-color));
  --i: calc(var(--segment-width) * -.5);
  inset: var(--inset, var(--i) 0);
  --p1: calc(var(--segment-width) / 2);
  --p2: calc(100% - var(--segment-width) / 2);
  clip-path: var(--clip, polygon( 50% 0, 100% var(--p1), 100% var(--p2), 50% 100%, 0% var(--p2), 0% var(--p1) ))
}
.digit > div:nth-child(3n+1)::after{  
  --inset: 0 var(--i);
  --clip: polygon(var(--p1) 0, var(--p2) 0, 100% 50%, var(--p2) 100%, var(--p1) 100%, 0 50%);
}

.digit > div[data-active="1"] {
  filter: drop-shadow(0 0 0.75vmin var(--segment-color-active));
}
.digit > div[data-active="1"]::after{
  background-color: var(--segment-color-active);
}


/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 21-08-22 */
/* css-counter postion background */
/* https://stackoverflow.com/questions/43514987/css-increasing-number-as-background-images-for-css */	
.box-counter::before { 
	position:absolute;
  display:flex;
	top:var(--count-pos-top,1.2rem);
  /*right:var(--count-pos-right);*/
  /*bottom:var(--count-pos-bottom);*/
  left:var(--count-pos-left);
	justify-content:center;
  align-items:center;
  counter-increment:Element 1;
	content:counter(Element) '';
	font-size:var(--count-size); 
	font: 800 Arial;
	  -webkit-text-fill-color:transparent; /* works FF, Chrome and Edge */
	  -webkit-text-stroke:var(--count-width,1px);
	  -webkit-font-smoothing:antialiased;
	color:var(--count-color); /* must be the same color als card-back background */
    opacity:1;
	/*z-index:999;*/
	}
/* shadow */
/*
.shadow, .flex-item {
  box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.04), 0 2px 2px rgba(0, 0, 0, 0.04), 0 4px 4px rgba(0, 0, 0, 0.04), 0 8px 8px rgba(0, 0, 0, 0.04), 0 16px 16px rgba(0, 0, 0, 0.04);
}
*/	
/* ------------------------------------------------------------------------------ */
/* END */	
/* ------------------------------------------------------------------------------ */