

@keyframes ripple {
  0% {
    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.0);
  }
  50% { 
    box-shadow: 0px 0px 0px $md-radio-ripple-size rgba(0, 0, 0, 0.1);
  }
  100% {
    box-shadow: 0px 0px 0px $md-radio-ripple-size rgba(0, 0, 0, 0);
  }
}

.md-radio {
  margin: 0.1rem 0;

  &.md-radio-inline {
    display: inline-block;
  }

  input[type="radio"] {
    display: none;
    &:checked + label:before {
      border-color: $md-radio-checked-color;
      animation: ripple 0.2s linear forwards;
    }
    &:checked + label:after {
      transform: scale(1);
    }
    &:disabled{
      + label:before {
        border-color: $md-disabled-color;
        animation: ripple 0.2s linear forwards;
      }

      + label:after {
        transform: scale(1.8);
        background:$md-checkbox-checked-color-disabled;
      }

    }
  }

  label {
    display: inline-block;
    height:$md-radio-size;
    position: relative;
    padding: 0 15px 0 ($md-radio-size + 10px); //modified by sarwar
    margin-bottom: 0;
    cursor: pointer;
    vertical-align: bottom;
    &:before, &:after {
      position: absolute;
      content: '';
      border-radius: 50%;
      transition: all .3s ease;
      transition-property: transform, border-color;
    }
    &:before {
      left: 0;
      top: 0;
      width: $md-radio-size;
      height: $md-radio-size;
      border: 2px solid $md-radio-border-color;
    }
    &:after {
      top: $md-radio-size / 2 - $md-radio-checked-size / 2;
      left: $md-radio-size / 2 - $md-radio-checked-size / 2;
      width:$md-radio-checked-size;
      height:$md-radio-checked-size;
      transform: scale(0);
      background:$md-radio-checked-color;
    }
  }
}
.pt-1{
  > .md-radio {
    margin: 0;
  }
}




// *************************************

// *************************************
*, *:before, *:after {
  box-sizing: border-box;
}

body {
  background:#f0f0f0;
  position: absolute;
  width:100%;
  padding:0;
  margin:0;
  font-family: "Roboto", sans-serif;
  color: #333;
}

section {
  background:white;
  margin:0 auto;
  padding: 4em;
  max-width: 800px;
  h1 {
    margin: 0 0 2em;
  }
}