/* Icon */
.border-radius (@radius: 5px) {
	-webkit-border-radius: @radius;
	-moz-border-radius: @radius;
	border-radius: @radius;
}

/* Variables */
@icon_align: center;
@shape_color: #41a9d5;
@icon_color: #41a9d5;
@image_padding: 1em;

.lrw-icon {
	// icon element align
	.lrw-icon-align() when (@icon_align = left) {
		.lrw-icon-element {
			text-align: left;
			margin-bottom: 0.618em;
		}
	}

	.lrw-icon-align() when (@icon_align = center) {
		.lrw-icon-element {
			text-align: center;
			margin-bottom: 0.618em;
		}
	}

	.lrw-icon-align() when (@icon_align = right) {
		.lrw-icon-element {
			text-align: right;
			margin-bottom: 0.618em;
		}
	}
	.lrw-icon-align();

	a {
		display: block;
	    position: absolute;
	    width: 100%;
	    height: 100%;
	    z-index: 1;
	    top: 0;
	}

	.element-shape_icon {

		// shape color
		.icon-inner {
			color: @icon_color;
		    display: inline-block;
		    position: relative;
		    text-align: center;

		    span {
		    	line-height: inherit;
		    }

		    &.icon-size-lg {
		    	line-height: 2.5em;
		    	width: 2.5em;
		    	height: 2.5em;

		    	span {
		    		font-size: 1.2em;
		    	}
		    }

		    &.icon-size-2x {
		    	line-height: 3.15em;
		    	width: 3.15em;
		    	height: 3.15em;

		    	span {
		    		font-size: 1.8em;
		    	}
		    }

		    &.icon-size-3x {
		    	line-height: 4em;
		    	width: 4em;
		    	height: 4em;

		    	span {
		    		font-size: 2.5em;
		    	}
		    }

		    &.icon-size-4x {
		    	line-height: 5em;
		    	width: 5em;
		    	height: 5em;

		    	span {
		    		font-size: 2.85em;
		    	}
		    }

		    &.icon-size-5x {
		    	line-height: 7.15em;
		    	width: 7.15em;
		    	height: 7.15em;

		    	span {
		    		font-size: 5em;
		    	}
		    }
		}
	}

	.element-shape_image {
		.image-wrapper {
			display: inline-block;
		    max-width: 100%;
			padding: @image_padding;
		    position: relative;
		    vertical-align: top;
    		width: auto;

		    &.overflow-hidden {
		    	overflow: hidden;
		    }
		}

		img {
			display: block;
		}
	}

	.element-shape_icon,
	.element-shape_image {
		// square or not
		.icon-element-background {
			background-color: @shape_color;

			&.has-hover:hover {
		    	background-color: darken(@shape_color, 10%);
		    }
		}

		.icon-element-outline {
			border: 2px solid @shape_color;

			&.has-hover:hover {
		    	border-color: darken(@shape_color, 10%);
		    }
		}

		// icon shape formats
		.icon-inner {
			&.icon-shape-none {
				border: 0;
	    		background: transparent;
	    		height: auto;
			    line-height: normal;
			    width: auto;
			    position: relative;

			    &:hover {
			    	background: transparent;
			    }

			    &.has-hover:hover {
			    	color: darken(@icon_color, 10%);
			    }
	    	}
		}

		.icon-shape-circle,
		.icon-shape-outline-circle {
			.border-radius(50%);
		}

		.icon-shape-square,
		.icon-shape-outline-square {}

		.icon-shape-rounded,
		.icon-shape-outline-rounded {
			.border-radius(5px);
		}

		.icon-shape-outline-circle,
		.icon-shape-outline-square,
		.icon-shape-outline-rounded {
			border-color: @shape_color;

			&.has-hover:hover {
		    	border-color: darken(@shape_color, 10%);
		    	color: darken(@icon_color, 10%);
		    }
		}
	}
}