@import "variables";

/**
 * Grid padding and margin (where 6px is the base unit)
 */

.grid-padding(@topSize: 1, @rightSize: @topSize, @bottomSize: @topSize, @leftSize: @topSize) {
	padding-top: @topSize * @gridBaseUnit;
	padding-right: @rightSize * @gridBaseUnit;
	padding-bottom: @bottomSize * @gridBaseUnit;
	padding-left: @leftSize * @gridBaseUnit;
}

.grid-margin(@topSize: 1, @rightSize: @topSize, @bottomSize: @topSize, @leftSize: @topSize) {
	margin-top: @topSize * @gridBaseUnit;
	margin-right: @rightSize * @gridBaseUnit;
	margin-bottom: @bottomSize * @gridBaseUnit;
	margin-left: @leftSize * @gridBaseUnit;
}

/**
 * Override icon size with a fixed size
 */

 .icon-size(@size) {
	 font-size: @size;
	 line-height: @size;
	 height: @size;
 }

 /**
 * Hidden text dedicated to screen readers
 */

.u-waiText() {
	position: absolute;
	left:     -10000px;
	top:      auto;
	width:    1px;
	height:   1px;
	overflow: hidden;
}

.truncate-line(@width: 100%) {
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: top;
    white-space: nowrap;
    overflow: hidden;
    width: @width;
}

.truncate-text(@width: 100%) {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	max-width: @width;
	width: auto;
}

/**
 * Clearfix for elements
 */

.clearfix () {
	&:before,
	&:after {
		content: " "; /* 1 */
		display: table; /* 2 */
	}
	&:after {
		clear: both;
	}
}

/**
 * Text-wrap and truncate in multiple lines
 */
 
.text-wrap(@numOfLines: 2, @lineHeight: 1.2rem) {
	white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: @numOfLines; /* number of lines to show */
    line-height: @lineHeight !important; /* fallback */
	max-height: (@lineHeight * @numOfLines);
}

/**
 * Set focus style on an element
 */

.focus(@shadowColor: @primaryFocusOutlineColor) {
	outline: none;
	box-shadow: 0 0 0 2px #fff, 0 0 0 (@primaryFocusOutlineOffset + 2px) fadeout(@shadowColor, 80%);
}

/**
 * Set common disabled style on an element
 */

 .disabled() {
	cursor: not-allowed;
	opacity: 0.5;
}

/**
 * Creates a line connector between elements
 */

.ui-connector(@height, @top, @left, @color, @zIndex: 0) {
    content: '';
    position: absolute;
    height: @height;
    width: 1px;
    background: @color;
    top: @top;
    left: @left;
    z-index: @zIndex;
}

.ui-striped-background(@color1, @color2, @width1: 5px, @width2: 2px, @deg: -55deg) {
    background: @color1; //fallback
    background: repeating-linear-gradient(
        @deg, 
        @color1, 
        @color1 @width1, 
        @color2 @width1, 
        @color2 (@width1 + @width2)
    );
}

/**
 * Creates a saw-tooth like bottom edge on an element using background-color and background-image
 */
.ui-tooth-edge(@height, @backgroundColor) {
	background-image:
    linear-gradient(
      45deg, transparent 33.333%,
      @backgroundColor 33.333%, @backgroundColor 66.667%,
      transparent 66.667%
    ),linear-gradient(
      -45deg, transparent 33.333%,
      @backgroundColor 33.333%, @backgroundColor 66.667%,
      transparent 66.667%
	);
	bottom: -@height/2;
    background-size: @height (@height * 2);
    background-position: 0 -@height;
}

.ui-stripe-overlay(@height, @color1, @color2, @width1: 5px, @width2: 2px, @deg: -55deg, @zIndex: 3) {
    width: 100%;
    position:absolute;
    height: @height;
    z-index: @zIndex;
    .ui-striped-background(@color1, @color2, @width1, @width2, @deg);
}

.ui-stripes {
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAK0lEQVQYV2P8////f0ZGRkYGKADzYRwQDRIA0SgqwAIwbXAVUGMY0QVAqgGzDxf+fIja2gAAAABJRU5ErkJggg==) repeat;
}

.ui-split-colors(@color1, @color2, @splitColor: #fff) {
	background: linear-gradient(135deg, @color1 0, @color1 49%, @splitColor 49%, @splitColor 51%, @color2 51%, @color2 100%);
}

.ui-elevated {
	position: relative;
	border-color: transparent;

	&:after {
		content: '';
		z-index: -1;
		position: absolute;
		left: 5%;
		right: 5%;
		top: 75px;
		bottom: 0%;
		background: rgba(0, 0, 0, 0.6);
		filter: blur(40px);
		border-radius: 3px;
	}
}

.svg-icon-color(@color, @important: false) {
	& when (@important = true) {
		.SVGImage-svg {
			path {
				fill: @color !important;
			}
		}
	}

	& when (@important = false) {
		.SVGImage-svg {
			path {
				fill: @color;
			}
		}
	}
}

.svg-icon-size(@size) {
	.SVGImage, .SVGImage-svg {
		height: @size;
		width: @size;
	}
}