@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css');
@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css');


$border-width: 3; // If you change this you will need to change svg path in the HTML to match.
$border: $border-width#{"px"} solid transparent;
$size: 50px;
$color-trans: color 0.8s ease-in-out;
$stroke-trans: stroke-dashoffset 0.8s ease-in-out;
$default-color: #ccc;
$colors: (red: #FF4136, yellow: #FFDC00, blue: #0074D9, green: #4CC259);

.icon-container {
	border: $border;
	background-color: transparent;
	position: relative;
	display: inline-block;
	color: $default-color;
	width: $size;
	height: $size;
	transition: $color-trans;
	cursor: pointer;
	i {
		border: $border;
      // Margin allows for different border size, but not font-size at the moment. 
      // Changing font size will require adjusting margin.
      margin: 40 - ($border-width*4%) auto; 
		font-size: 16px;
		text-align: center;
		width: $size - ($border-width*2);
	}
	svg {
		position:absolute;
		top: $border-width * -1px;
		left: 50%;
		width: $size;
		height: $size;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		pointer-events: none;
		path {
			fill: none;
			stroke: $default-color;
			stroke-width: 3;
			stroke-dasharray: 200;
			stroke-dashoffset: 200;
			stroke-linecap: square;
			-webkit-transition: $stroke-trans;
			transition: $stroke-trans;
		}
	}
	&:hover svg path {
		stroke-dashoffset: 0;
	}
	&[data-icon~="border"] {
		border-color: $default-color;
	}
	&[data-icon~="square"] {
		svg path.icon-circle {
			display: none;
		}
		svg path.icon-square {
			display: block;
		}
	}
	&[data-icon~="circle"] {
		border-radius: $size / 2;
		svg path.icon-circle {
			display: block;
		}
		svg path.icon-square {
			display: none;
		}
	}
  @each $color, $value in ($colors) {
    &[data-icon~="#{$color}"] {
      svg path {
        stroke: $value;
      }
      &:hover {
        color: $value;
      }
    }
  }
}