- var colone = "#ff8a00";
- var coltwo = "#da1b60";
- var border = "#4c4f5a";

- var sizeS = "8px";
- var sizeM = "18px";
- var sizeL = "20px";

.container
  .name
    svg.gear
      path(
      d="M15 6.675l-1.8-.6c-.2-.1-.3-.3-.2-.4l.9-1.7c.6-1.2-.7-2.5-1.9-1.9l-1.7.9c-.1.1-.3 0-.4-.2l-.6-1.8c-.4-1.3-2.2-1.3-2.6 0l-.6 1.8c-.1.2-.3.3-.4.2l-1.7-.9c-1.2-.6-2.5.7-1.9 1.9l.9 1.7c.1.1 0 .3-.2.4l-1.8.6c-1.3.4-1.3 2.3 0 2.7l1.8.6c.2 0 .3.2.2.3l-.9 1.7c-.6 1.2.7 2.5 1.9 1.9l1.7-.9c.2-.1.4 0 .4.2l.6 1.8c.4 1.3 2.3 1.3 2.7 0l.6-1.8c.1-.2.3-.3.4-.2l1.7.9c1.2.6 2.5-.7 1.9-1.9l-1-1.7c-.1-.2 0-.4.2-.4l1.8-.6c1.3-.4 1.3-2.2 0-2.6zm-7 3.7c-1.3 0-2.4-1.1-2.4-2.4 0-1.3 1.1-2.4 2.4-2.4 1.3 0 2.4 1.1 2.4 2.4 0 1.3-1.1 2.4-2.4 2.4z"
      fill=border
      )      
    h4 Click on the radio buttons or labels
  each val in [{id: "Uno", name: "I like this work"}, {id: "Dos", name: "Share in social networks"}, {id: "Tres", name: "Follow the author"}]
    input(
    type="radio" 
    name="field"
    id= val.id
    )
    label(
    for= val.id
    )
      svg.check(
      viewbox="0 0 40 40"
      )
        defs
          linearGradient(
          id="gradient"
          x1="0"
          y1="0"
          x2="0"
          y2="100%"
          )
            stop(
            offset="0%"
            stop-color=colone
            )
            stop(
            offset="100%"
            stop-color=coltwo
            )
        circle(
        id="border"
        r= sizeM
        cx= sizeL
        cy= sizeL
        )
        circle(
        id="dot"
        r= sizeS
        cx= sizeL
        cy= sizeL
        )
      = val.name
      
.btn
  a(href="https://codepen.io/andrejsharapov/pen/GzaMRq" target="_blank" title="") Styles for the Checkboxes
  a(href="https://twitter.com/andrejsharapov" target="_blank" title="") Follow me in Twitter

$colone: #ff8a00;
$coltwo: #da1b60;

$size: 1.35rem;
$color_: #7a7a8c;
$ground: #1d1e22; // ffffff
$border: #4c4f5a;

$duration: 500;

// for demo

body {
  margin: 0;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font: 400 $size sans-serif;
  color: $color_;
  background-color: $ground;
  background: radial-gradient(
    $border 6%,
    transparent 6%),
    darken($ground, 2%
  );
  background-position: 0 0, 25px 25px;
  background-size: 25px 25px;
}

a {
  text-decoration: none;
  color: $color_;
  font-size: $size / 2;
}

.container {
  position: relative;
  padding: ($size / 2);
  display: flex;
  min-width: 400px;
  height: auto;
  flex-direction: column;
  justify-content: center;
  border-radius: $size / 3;
  background-color: $ground;
  box-shadow: 0 5px 30px rgba(darken($ground, 12%), 0.3);
  
  .name {
    margin-bottom: ($size / 2);
    display: flex;
    justify-content: flex-end;
    
    h4 {      
      margin: 0;
      text-transform: uppercase;
      font-size: ($size / 1.5);
      font-weight: normal;
      color: lighten($color_, 35%);
      transform: scale(0);
      transform-origin: 100% 50%;
      transition: transform $duration * 1ms ease;
    }
  }
  
  svg {
    width: $size;
    height: $size;
    
    &.gear {
      order: 1;
      margin-left: $size;
      cursor: help;
      
      &:hover ~ h4 {
        transform: scale(1);
      }
    }
  }
}

.btn {
  position: absolute;
  bottom: $size;
  left: 50%;
  transform: translateX(-50%);
  
  a {
    margin: auto $size;
  }
}

// radio buttons

label {
  position: relative;
  margin: ($size / 2) $size;
  display: flex;
  width: auto;
  align-items: center;
  cursor: pointer;
}

.check {
  margin-right: 7px;
  width: $size;
  height: $size;

  #border {
    fill: none;
    stroke: $color_;
    stroke-width: 3;
    stroke-linecap: round;
  }

  #dot {
    fill: url(#gradient);
    transform: scale(0);
    transform-origin: 50% 50%;
  }
}

input {
  display: none;

  &:checked + label {
    background: linear-gradient(180deg, $colone, $coltwo);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    svg {
      #border {
        stroke: url(#gradient);
        stroke-dasharray: 145;
        stroke-dashoffset: 145;
        animation: checked $duration * 1ms ease forwards;
      }

      #dot {
        transform: scale(1);
        transition: transform $duration * 1ms
          cubic-bezier(0.57, 0.21, 0.69, 3.25);
      }
    }
  }
}

@keyframes checked {
  to {
    stroke-dashoffset: 0;
  }
}