/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
 
[data-align="center"] > .gauge,
.gauge.center {
    left: 50%;
    transform: translateX(-50%);
}

[data-align="right"] > .gauge,
.gauge.right {
    left: 100%;
    transform: translateX(-100%);
}
 
/* Gauge */
.gauge {
  --deg: calc(90deg - (180deg * (1 - (var(--percent)/100))));
  
  display: inline-block;
  position: relative;
  overflow: hidden;
  margin: var(--margin);
  max-width: var(--max-width);
  width: 100%;
}

/* Responsive */
.gauge:after { 
  content: " ";
  display: block;
  padding-bottom: 80%;
}

.gauge > .element {
  position: absolute;
  width: calc(100% - (var(--margin) * 2));
  height: 120%;
  border: 10px solid var(--border-color);
  border-radius: 50%;
  border-bottom: 10px solid transparent;
  user-select: none;
  width: 100%;
  max-width: calc(100% - (var(--margin) * 2));
  box-sizing: border-box;
  background:
    /*small circle in center */
    radial-gradient(ellipse at center, var(--color) 0%, var(--color) 2%, transparent 2%, transparent 3%),

    /* bottom cut off area */
    linear-gradient(to top, var(--background-color) 0%, var(--background-color) 14%, transparent 14%, transparent 15%),

    /* a radial gradient to show only a part of the gradient (20px here)*/
    radial-gradient(ellipse at center, var(--background-color) 0%, var(--background-color) 2%, var(--background-color) 60%, transparent 60%, transparent 61%),

    /* the main gradient */
    conic-gradient(from 180deg at 50% 50%, red 0%, yellow 49%, green 100%);
}

/* Title */
.gauge > .element > .title {
	display: block;
	text-align: center;
	position: absolute;
	width: 100%;
	bottom: 20%;
	transform: translateY(-50%);
	color: var(--font-color);
}

/* Pin */
.gauge > .element:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 50%;
    width: 20px;
    height: 35%;
    transform: rotate(var(--deg)) translateX(-50%);
    transform-origin: 0% 100%;
    transition: transform 0.15s ease;
    
    background-color: var(--color);
    
    mask-image: url("../images/pin.png");
    mask-repeat: no-repeat;
    mask-position: bottom;
    mask-size: contain;
    
    -webkit-mask-image: url("../images/pin.png");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: bottom;
    -webkit-mask-size: contain;
}

/* Percent */
.gauge > .element:before {
    display: block;
    content: attr(data-percent) "%";
    position: absolute;
    left: 50%;
    bottom: 50%;
    width: fit-content;
    height: fit-content;
    font-size: 35px;
    transform: translateY(200%) translateX(-50%);
	color: var(--font-color);
}