// Parametric Mixins

.box-shadow(@string) {
	-webkit-box-shadow: @string;
	-moz-box-shadow:    @string;
	box-shadow:         @string;
}

.text-shadow(@string) {
	-webkit-text-shadow: @string;
	-moz-text-shadow:    @string;
	text-shadow:         @string;
}

.box-sizing(@type: border-box) {
	-webkit-box-sizing: @type;
	-moz-box-sizing:    @type;
	box-sizing:         @type;
}

.border-radius(@radius) {
	-webkit-border-radius: @radius;
	-moz-border-radius:    @radius;
	border-radius:         @radius;
    .clip;
}

.opacity(@opacity) {
	-webkit-opacity: @opacity;
	-moz-opacity: 	 @opacity;
	opacity: 		     @opacity;
}

.transform(@string){
	-webkit-transform: @string;
	-moz-transform:    @string;
	-ms-transform: 	   @string;
	-o-transform: 	   @string;
	transform: 	       @string;
}

.transition(@property) {
	-webkit-transition: @property;
	-moz-transition:    @property;
	-ms-transition:     @property;
	-o-transition:      @property;
	transition:         @property;
}

.animation(@property) {
	-webkit-animation: @property;
	-moz-animation:    @property;
	-ms-animation:     @property;
	-o-animation:      @property;
	animation:         @property;
}

.align-items(@property) {
	-webkit-box-align:   @property;
	-moz-box-align:      @property;
	-ms-flex-align:      @property;
	-webkit-align-items: @property;
	align-items:         @property;
}

.justify-content(@property) {
	-webkit-justify-content: @property;
  justify-content:         @property;
  -moz-box-pack:           @property;
  box-pack:                @property;
}

.flex-wrap(@property) {
	-webkit-flex-wrap: @property;
	-ms-flex-wrap:     @property;
  flex-wrap:         @property;
}

.flex() {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}

.sticky() {
	position: -webkit-sticky;
	position: -moz-sticky;
	position: -ms-sticky;
	position: -o-sticky;
	position: sticky;
}

.clip() {
    -moz-background-clip:    padding;
    -webkit-background-clip: padding-box;
    background-clip:         padding-box;
}

// Interactions

.icon-color-states(@color) {
    svg {
        path {
            fill: @color;
        }
    }
    &:hover {
        svg {
            path {
                fill: tint(@color, 10%);
            }
        }
    }
    &:active {
        svg {
            path {
                fill: shade(@color, 10%);
            }
        }
    }
}

.text-color-states(@color) {
    color: @color;
    &:hover {
        color: tint(@color, 10%);
    }
    &:active {
        color: shade(@color, 10%);
    }
}

.background-color-states(@color) {
    background-color: @color;
    &:hover {
        background-color: tint(@color, 10%);
    }
    &:active {
        background-color: shade(@color, 10%);
    }
}

.placeholder-color(@color) {
    &::-webkit-input-placeholder, &::placeholder {
				opacity: 1;
        color: @color;
    }
    &::-moz-placeholder, &:-ms-input-placeholder, &:-moz-placeholder { //Temporary bug fix: Placeholders for other browsers had to be separated from webkit version
        opacity: 1;
				color: @color;
    }
		&:focus::-webkit-input-placeholder, &:focus::placeholder {
        opacity: .5;
    }
    &:focus::-moz-placeholder, &:focus:-ms-input-placeholder, &:focus:-moz-placeholder { //Temporary bug fix: Placeholders for other browsers had to be separated from webkit version
        opacity: .5;
    }
}

// Measurements

.credit-metrics(@height) {
    height: @height;
    img {
        width: @height;
        height: @height;
    }
    span {
				height: @height;
				margin-left: @height * .2;
				padding: @height * .125 0;
				b {
						font-size: @height * .35 !important;
				}
				small, time {
						font-size: @height * .325 !important;
				}
				a {
						font-size: @height * .325 !important;
				}
    }
}