/*
 * Application mixins
 */

// gets bootstrap mixins
@import "../../../../../../../node_modules/bootstrap/less/mixins";


// -
// Modifiers
// ---

.font-size-modifier(@font-size) {
    font-size: floor(@font-size * @font-size-modifier);
}

.box-shadow(@shadow) when (@enable-box-shadow = true) {
    -webkit-box-shadow: @shadow;
    -moz-box-shadow: @shadow;
    box-shadow: @shadow;
}
.box-shadow(@shadow) when (@enable-box-shadow = false) {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.border-radius(@border-radius) when (@enable-border-radius = true) {
    -webkit-border-radius: @border-radius;
    -moz-border-radius: @border-radius;
    border-radius: @border-radius;
}
.border-radius(@border-radius) when (@enable-border-radius = false) {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.border(@border) when (@enable-border = true) {
    border: @border;
}

.border(@border) when (@enable-border = false) {
    border: none;
}

.opacity(@opacity) {
    opacity: @opacity;
    @opacityie: @opacity * 100;
    filter: ~"alpha(opacity=@{opacityie})";
    zoom: 1;
}


// -
// Forms
// ---

// Form control focus state
// NB. It's c/c from bootstrap to also append styles to a `.focus` class for more reusability.
//
// Generate a customized focus state and for any input with the specified color,
// which defaults to the `@input-border-focus` variable.
//
// We highly encourage you to not customize the default value, but instead use
// this to tweak colors on an as-needed basis. This aesthetic change is based on
// WebKit's default styles, but applicable to a wider range of browsers. Its
// usability and accessibility should be taken into account with any change.
//
// Example usage: change the default blue border and shadow to white for better
// contrast against a dark gray background.
.form-control-focus(@color: @input-border-focus) {
    @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);

    &.focus,
    &:focus {
        border-color: @color;
        outline: 0;
        .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
    }
}


// -
// Typography
// ---

// rewrite bootstrap method to add `!important` in order to have the correct color on any element
// (even those who originally have a defined color)
.text-emphasis-variant(@color) {
    color: @color !important;
    a&:hover,
    a&:focus {
        color: darken(@color, 10%) !important;
    }
}

// makes text readable on all bg types/colors
// uses same styles than movie subtitles : white text with black border
.text-movie-subtitles() {
    color: white;

    // simulates borders
    text-shadow:
         0.05em  0      1px rgba(0, 0, 0, 0.75),
         0       0.05em 1px rgba(0, 0, 0, 0.75),
        -0.05em  0      1px rgba(0, 0, 0, 0.75),
         0      -0.05em 1px rgba(0, 0, 0, 0.75);
}


// -
// Buttons
// ---

.button-base() {
    display: inline-block;
    margin-bottom: 0; // For input.btn
    font-weight: @btn-font-weight;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
    border-width: 1px;
    border-style: solid;
    white-space: nowrap;
    .button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @btn-border-radius-base);
    .user-select(none);

    &,
    &:active,
    &.active {
        &:focus,
        &.focus {
            .tab-focus();
        }
    }

    &:hover,
    &:focus,
    &.focus {
        text-decoration: none;
    }

    &:active,
    &.active {
        outline: 0;
        background-image: none;
        .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
    }

    &.disabled,
    &[disabled],
    fieldset[disabled] & {
        cursor: @cursor-disabled;
        .opacity(.65);
        .box-shadow(none);
    }

    a& {
        &.disabled,
        fieldset[disabled] & {
            pointer-events: none; // Future-proof disabling of clicks on `<a>` elements
        }
    }
}

.button-link-base() {
    .button-base();

    font-weight: normal;
    border-radius: 0;

    &,
    &:active,
    &.active,
    &[disabled],
    fieldset[disabled] & {
        background-color: transparent;
        .box-shadow(none);
    }
    &,
    &:hover,
    &:focus,
    &:active {
        border-color: transparent;
    }
    &:hover,
    &:focus {
        background-color: transparent;
    }
    &[disabled],
    fieldset[disabled] & {
        &:hover,
        &:focus {
            text-decoration: none;
        }
    }
}

// expose a mixin to generate button links variant (this is not down by bootstrap)
.button-link-variant(@color, @hover-color, @hover-decoration: none) {
    color: @color;

    &:hover,
    &:focus {
        color: @hover-color;
        text-decoration: @hover-decoration;
    }
    &[disabled],
    fieldset[disabled] & {
        &:hover,
        &:focus {
            color: @color;
        }
    }
}

.pagination-btn-variant() {
    background: @pagination-bg;
    color: @pagination-color;
    border-color: @pagination-border;
    .border-radius(@border-radius-base);

    &.hover, &:hover,
    &.focus, &:focus,
    &.active, &:active {
        background: @pagination-hover-bg;
        color: @pagination-hover-color;
        border-color: @pagination-hover-border;
    }

    &:disabled,
    &.disabled {
        background: @pagination-disabled-bg;
        color: @pagination-disabled-color;
        border-color: @pagination-disabled-border;
    }
}


// -
// Placeholders
// ---

.placeholder-variant(@font-size, @padding, @border-radius, @border) {
    //font-size: @font-size;
    padding: @padding;
    border-width: @border;
    border-radius: @border-radius;

    .placeholder-icon {
        font-size: @font-size*2;
        height: @font-size*4;
        width: @font-size*4;

        margin-right: floor(@grid-gutter-width / 2);
    }

    .placeholder-body {
        border-left-width: @border;

        .placeholder-title {
            display: block;
            font-size: @font-size;
            font-weight: bold;
        }

        .placeholder-help {
            font-size: @font-size-base; // todo this will be ugly on sm placeholder
        }
    }
}


// -
// Flying alerts
// ---

.flying-alert-variant(@color, @bg-color, @border-color) {
    color: @color;
    background-color: @bg-color;
    border-color: @border-color;

    .flying-alert-icon-secondary {
        background: @bg-color;
        border-color: @color;
    }
}
