// /**
// * Copyright © Magento, Inc. All rights reserved.
// * See COPYING.txt for license details.
// */

// # Utilities
// <code>_utilities.less</code> is a reuseable collection of basic Less mixins.
//
// # .lib-clearfix()
//
// The <code>.lib-clearfix()</code> mixin is a modern solution for healing container`s height which have floated elements. Also its applying prevents top-margins from collapsing.
//

.example-clearfix-container-1 {
border: 1px solid #f00;
}

.example-clearfix-container-2 {
.lib-clearfix();
border: 1px solid #0f0;
}

.example-clearfix-item.left {
float: left;
}
.example-clearfix-item.right {
float: right;
}

// Container with floated child elements without <code>.lib-clearfix()</code>
// ```
// <div class="example-clearfix-container-1">
// <div class="example-clearfix-item left">
// Float left
// </div>
// <div class="example-clearfix-item right">
// Float right
// </div>
// </div>
// ```

// Container with floated child elements with <code>.lib-clearfix()</code>
// ```
// <div class="example-clearfix-container-2">
// <div class="example-clearfix-item left">
// Float left
// </div>
// <div class="example-clearfix-item right">
// Float right
// </div>
// </div>
// ```

// # .lib-visibility-hidden()
//
// The <code>.lib-visibility-hidden()()</code> mixin changes element`s visibility to hidden and height to 0.
//

.example-visibility-hidden {
.lib-visibility-hidden();
}

//
// This is a block with applied <code>.lib-visibility-hidden()</code> mixin.

//
// ```
// <div class="example-visibility-hidden">
// <div>
// This is hidden text
// </div>
// </div>
// ```

// # .lib-visually-hidden()
//
// The <code>.lib-visually-hidden()</code> mixin safely hides the element for accessibility reasons.
//

.example-visually-hidden-1 {
.lib-visually-hidden();
}

//
// This is a block with applied <code>.lib-visually-hidden()</code> mixin.

//
// ```
// <div class="example-visually-hidden-1">
// <div>
// This is hidden text
// </div>
// </div>
// ```

// # .lib-visually-hidden-reset()
//
// The <code>.lib-visually-hidden-reset()</code> mixin resets hidden visibility and makes element again visible.
//

.example-visually-hidden-2 {
background: #fdf0d5;
padding: 5px;
.lib-visually-hidden();
}

.example-visually-hidden-2 {
.lib-visually-hidden-reset();
}

//
// This is a block with applied <code>.lib-visually-hidden-reset()</code> mixin after <code>.lib-visually-hidden()</code> applying.

//
// ```
// <div class="example-visually-hidden-2">
// <div>
// The text is visible again
// </div>
// </div>
// ```

// # .lib-css()
//
// The <code>.lib-css()</code> mixin is used to set any css property if there is a value passed to it by a variable. Also <code>.lib-css()</code> can add -ms-, -webkit- and -moz- prefixes if needed.
//

.example-css-container {
.lib-css(padding, @indent__base);
.lib-css(background, @secondary__color);
}

//
// If the variable is set to <code>false</code>, the <code>.lib-css()</code> mixin will add nothing to the code.
//
// ```
// <div class="example-css-container">
// Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt..
// </div>
// ```
//

.example-css-container-2 {
.lib-css(background, false);
}

// ```
// <div class="example-css-container-2">
// Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt..
// </div>
// ```
//

// # .lib-css() variables
//
// <pre>
// <table>
// <tr>
// <th class="vars_head">Mixin variable</th>
// <th class="vars_head">Default value </th>
// <th class="vars_head">Allowed values</th>
// <th class="vars_head">Comment</th>
// </tr>
// <tr>
// <th>@_property</th>
// <td class="vars_value">false</td>
// <td class="vars_value">'' | false | value</td>
// <td>Any css property</td>
// </tr>
// <tr>
// <th>@_value</th>
// <td class="vars_value">false</td>
// <td class="vars_value">'' | false | value</td>
// <td>Any css value</td>
// </tr>
// <tr>
// <th>@_prefix</th>
// <td class="vars_value">0</td>
// <td class="vars_value">'' | false | 1</td>
// <td>If set to "1" adds -ms-, -webkit- and -moz- prefixes to the property</td>
// </tr>
// </table>
// </pre>

// # .lib-rotate()
//
// The <code>.lib-rotate()</code> mixin is a wrapper for css3 transform property with rotate value.
//

.example-rotate {
background: #f00;
position: absolute;
height: 20px;
width: 40px;
.lib-rotate(
@_rotation: 45deg;
);
}

//
// ```
// <div class="example-rotate"></div>
// ```

// # .lib-rotate() variables
//
// <pre>
// <table>
// <tr>
// <th class="vars_head">Mixin variable</th>
// <th class="vars_head">Default value </th>
// <th class="vars_head">Allowed values</th>
// <th class="vars_head">Comment</th>
// </tr>
// <tr>
// <th>@rotation</th>
// <td class="vars_value">''</td>
// <td class="vars_value">'' | false | value</td>
// <td>Transform rotate value, false or ''</td>
// </tr>
// </table>
// </pre>

// # .lib-input-placeholder()
//
// The <code>.lib-input-placeholder()</code> mixin is used to change placeholder font-color and font-weight.
//

.example-placeholder {
.lib-input-placeholder(#808080, bold);
}

//
// ```
// <input placeholder="Default text" class="example-placeholder" type="text" />
// ```
//

// # .lib-input-placeholder() variables
//
// <pre>
// <table>
// <tr>
// <th class="vars_head">Mixin variable</th>
// <th class="vars_head">Default value</th>
// <th class="vars_head">Allowed values</th>
// <th class="vars_head">Comment</th>
// </tr>
// <tr>
// <th>@_input-placeholder-color</th>
// <td class="vars_value">@form-element-input-placeholder__color</td>
// <td class="vars_value">'' | false | value</td>
// <td>Input placeholder color</td>
// </tr>
// <tr>
// <th>@_input-placeholder-font-weight</th>
// <td class="vars_value">@form-element-input__font-weight</td>
// <td class="vars_value">'' | false | value</td>
// <td>Input placeholder font-weight</td>
// </tr>
// </table>
// </pre>

// # .lib-background-gradient()
//
// The <code>.lib-background-gradient()</code> mixin is used for applying custom css3 gradient.
//

.example-background-gradient-1 {
.lib-background-gradient(
@_background-gradient: true,
@_background-gradient-direction: vertical,
@_background-gradient-color-start: #cff,
@_background-gradient-color-end: #ccf
);
}

.example-background-gradient-2 {
.lib-background-gradient(
@_background-gradient: true,
@_background-gradient-direction: horizontal,
@_background-gradient-color-start: #cff,
@_background-gradient-color-end: #ccf
);
}

.example-background-gradient-3-wrapper {
background: #ffc;
padding: 10px;
}

.example-background-gradient-3 {
.lib-background-gradient(
@_background-gradient: true,
@_background-gradient-direction: horizontal,
@_background-gradient-color-start: rgba(255,255,255,0),
@_background-gradient-color-end: #ccf,
@_background-gradient-color-position: false
);
}

//
// ```
// <div class="example-background-gradient-1">
// I`m gradient with vertical direction
// </div>
// ```
//

//
// ```
// <div class="example-background-gradient-2">
// I`m gradient with horizontal direction
// </div>
// ```
//

//
// ```
// <div class="example-background-gradient-3-wrapper">
// <div class="example-background-gradient-3">
// I`m gradient with horizontal direction from transparent to a color
// </div>
// </div>
// ```
//

// # .lib-background-gradient() variables
//
// <pre>
// <table>
// <tr>
// <th class="vars_head">Mixin variable</th>
// <th class="vars_head">Default value</th>
// <th class="vars_head">Allowed values</th>
// <th class="vars_head">Comment</th>
// </tr>
// <tr>
// <th>@_background-gradient</th>
// <td class="vars_value">false</td>
// <td class="vars_value">'' | false | true</td>
// <td>If set to 'true' the element has gradient background</td>
// </tr>
// <tr>
// <th>@_background-gradient-direction</th>
// <td class="vars_value">''</td>
// <td class="vars_value">'' | horizontal | vertical</td>
// <td>Gradient direction (horizontal or vertical)</td>
// </tr>
// <tr>
// <th>@_background-gradient-color-start</th>
// <td class="vars_value">''</td>
// <td class="vars_value">'' | false | value</td>
// <td>Gradient start color (any css color)</td>
// </tr>
// <tr>
// <th>@_background-gradient-color-end</th>
// <td class="vars_value">''</td>
// <td class="vars_value">'' | false | value</td>
// <td>Gradient end color (any css color) </td>
// </tr>
// <tr>
// <th>@_background-gradient-color-position</th>
// <td class="vars_value">false</td>
// <td class="vars_value">'' | false | true</td>
// <td>Sets the background-color fallback property. When set to 'false', the background-color property will be set to @_background-gradient-color-end. When set to 'true', the background-color property will be set to @_background-gradient-color-start</td>
// </tr>
// </table>
// </pre>