@import '../../styleguide.less';

/* Helper function to create a group of buttons (in small, default & large) */
.buttonGroup(@color, @backgroundColor, @hoverColor, @hoverBackgroundColor, @hoverBorderColor, @inactiveColor, @inactiveBackgroundColor, @inactiveBorderColor, @borderRadius: 0, @paddingTop, @paddingLeft, @fontSize: 10px, @lineHeight: 12px, @hasBorder: false, @borderColor, @hasShadow: false, @shadowColor, @shadowOpacity1: 20%, @shadowOpacity2: 11%, @shadowOpacity3: 12%, @createArrows: true, @borderSize: 1px, @centerText: true) {
    &.small {
        @header-xsmall-caps();

        & when (@createArrows) {
            /* &:not(.@{iconClassName}-left):not(.@{iconClassName}-right) {*/
            &:not(.arrow-right):not(.arrow-left) {
                .button(@color, @backgroundColor, @hoverColor, @hoverBackgroundColor, @hoverBorderColor, @inactiveColor, @inactiveBackgroundColor, @inactiveBorderColor, @borderRadius, @paddingTop, @paddingLeft, @fontSize, @lineHeight, @hasBorder, @borderColor, @hasShadow, @shadowColor, @shadowOpacity1, @shadowOpacity2, @shadowOpacity3, false, '', @fontSize, '', @borderSize, @centerText);
            }
            /*&.@{iconClassName}-left {*/
            &.arrow-left {
                .button(@color, @backgroundColor, @hoverColor, @hoverBackgroundColor, @hoverBorderColor, @inactiveColor, @inactiveBackgroundColor, @inactiveBorderColor, @borderRadius, @paddingTop, @paddingLeft, @fontSize, @lineHeight, @hasBorder, @borderColor, @hasShadow, @shadowColor, @shadowOpacity1, @shadowOpacity2, @shadowOpacity3, true, '\e933', @fontSize, 'left', @borderSize, @centerText);
            }
            /*&.@{iconClassName}-right {*/
            &.arrow-right {
                .button(@color, @backgroundColor, @hoverColor, @hoverBackgroundColor, @hoverBorderColor, @inactiveColor, @inactiveBackgroundColor, @inactiveBorderColor, @borderRadius, @paddingTop, @paddingLeft, @fontSize, @lineHeight, @hasBorder, @borderColor, @hasShadow, @shadowColor, @shadowOpacity1, @shadowOpacity2, @shadowOpacity3, true, '\e934', @fontSize, 'right', @borderSize, @centerText);
            }
        }

        & when not (@createArrows) {
            .button(@color, @backgroundColor, @hoverColor, @hoverBackgroundColor, @hoverBorderColor, @inactiveColor, @inactiveBackgroundColor, @inactiveBorderColor, @borderRadius, @paddingTop, @paddingLeft, @fontSize, @lineHeight, @hasBorder, @borderColor, @hasShadow, @shadowColor, @shadowOpacity1, @shadowOpacity2, @shadowOpacity3, false, '', @fontSize, '', @borderSize, @centerText);
        }       
    }

    &.default {
        @header-small-caps();

        & when (@createArrows) {
            /* &:not(.@{iconClassName}-left):not(.@{iconClassName}-right) {*/
            &:not(.arrow-right):not(.arrow-left) {
                .button(@color, @backgroundColor, @hoverColor, @hoverBackgroundColor, @hoverBorderColor, @inactiveColor, @inactiveBackgroundColor, @inactiveBorderColor, @borderRadius, @paddingTop + 2, @paddingLeft + 4, @fontSize, @lineHeight, @hasBorder, @borderColor, @hasShadow, @shadowColor, @shadowOpacity1, @shadowOpacity2, @shadowOpacity3, false, '', @fontSize, '', @borderSize, @centerText);
            }
            /*&.@{iconClassName}-left {*/
            &.arrow-left {
                .button(@color, @backgroundColor, @hoverColor, @hoverBackgroundColor, @hoverBorderColor, @inactiveColor, @inactiveBackgroundColor, @inactiveBorderColor, @borderRadius, @paddingTop + 2, @paddingLeft + 4, @fontSize, @lineHeight, @hasBorder, @borderColor, @hasShadow, @shadowColor, @shadowOpacity1, @shadowOpacity2, @shadowOpacity3, true, '\e933', @fontSize, 'left', @borderSize, @centerText);
            }
            /*&.@{iconClassName}-right {*/
            &.arrow-right {
                .button(@color, @backgroundColor, @hoverColor, @hoverBackgroundColor, @hoverBorderColor, @inactiveColor, @inactiveBackgroundColor, @inactiveBorderColor, @borderRadius, @paddingTop + 2, @paddingLeft + 4, @fontSize, @lineHeight, @hasBorder, @borderColor, @hasShadow, @shadowColor, @shadowOpacity1, @shadowOpacity2, @shadowOpacity3, true, '\e934', @fontSize, 'right', @borderSize, @centerText);
            }
        }

        & when not (@createArrows) {
            .button(@color, @backgroundColor, @hoverColor, @hoverBackgroundColor, @hoverBorderColor, @inactiveColor, @inactiveBackgroundColor, @inactiveBorderColor, @borderRadius, @paddingTop + 2, @paddingLeft + 4, @fontSize, @lineHeight, @hasBorder, @borderColor, @hasShadow, @shadowColor, @shadowOpacity1, @shadowOpacity2, @shadowOpacity3, false, '', @fontSize, '', @borderSize, @centerText);
        }  
    }

    &.large {
        @header-default-caps();

        & when (@createArrows) {
            /* &:not(.@{iconClassName}-left):not(.@{iconClassName}-right) {*/
            &:not(.arrow-right):not(.arrow-left) {
                .button(@color, @backgroundColor, @hoverColor, @hoverBackgroundColor, @hoverBorderColor, @inactiveColor, @inactiveBackgroundColor, @inactiveBorderColor, @borderRadius, @paddingTop + 2, @paddingLeft + 16, @fontSize, @lineHeight, @hasBorder, @borderColor, @hasShadow, @shadowColor, @shadowOpacity1, @shadowOpacity2, @shadowOpacity3, false, '', @fontSize, '', @borderSize, @centerText);
            }
            /*&.@{iconClassName}-left {*/
            &.arrow-left {
                .button(@color, @backgroundColor, @hoverColor, @hoverBackgroundColor, @hoverBorderColor, @inactiveColor, @inactiveBackgroundColor, @inactiveBorderColor, @borderRadius, @paddingTop + 2, @paddingLeft + 16, @fontSize, @lineHeight, @hasBorder, @borderColor, @hasShadow, @shadowColor, @shadowOpacity1, @shadowOpacity2, @shadowOpacity3, true, '\e933', @fontSize, 'left', @borderSize, @centerText);
            }
            /*&.@{iconClassName}-right {*/
            &.arrow-right {
                .button(@color, @backgroundColor, @hoverColor, @hoverBackgroundColor, @hoverBorderColor, @inactiveColor, @inactiveBackgroundColor, @inactiveBorderColor, @borderRadius, @paddingTop + 2, @paddingLeft + 16, @fontSize, @lineHeight, @hasBorder, @borderColor, @hasShadow, @shadowColor, @shadowOpacity1, @shadowOpacity2, @shadowOpacity3, true, '\e934', @fontSize, 'right', @borderSize, @centerText);
            }  
        }

        & when not (@createArrows) {
            .button(@color, @backgroundColor, @hoverColor, @hoverBackgroundColor, @hoverBorderColor, @inactiveColor, @inactiveBackgroundColor, @inactiveBorderColor, @borderRadius, @paddingTop + 2, @paddingLeft + 16, @fontSize, @lineHeight, @hasBorder, @borderColor, @hasShadow, @shadowColor, @shadowOpacity1, @shadowOpacity2, @shadowOpacity3, false, '', @fontSize, '', @borderSize,  @centerText);
        }  
    }
}

/* Helper function to create a button */
.button(@color, @backgroundColor, @hoverColor, @hoverBackgroundColor, @hoverBorderColor, @inactiveColor, @inactiveBackgroundColor, @inactiveBorderColor, @borderRadius: 0, @paddingTop, @paddingLeft, @fontSize: 10px, @lineHeight: 12px, @hasBorder: false, @borderColor: '', @hasShadow: false, @shadowColor: '', @shadowOpacity1: 20%, @shadowOpacity2: 11%, @shadowOpacity3: 12%, @addIcon: false, @iconContent: '', @iconSize: 8px, @iconPosition: 'left', @borderSize: 1px, @centerText: true) {
    padding: @paddingTop @paddingLeft;

    & when not (@backgroundColor = '') {
        background: @backgroundColor;
    }

    color: @color;
    position: relative;
    cursor: pointer;
    text-transform: uppercase;
    text-decoration: none;
    box-sizing: border-box;
    display: flex;
    white-space:nowrap;
    transition: box-shadow ease 0.2s; /*, transform ease 0.2s;*/
    text-align: left;
    border: 0;
    /*padding: 10px 42px 10px 17px;*/
    width: auto;
    height: auto;
    .box-sizing();
    position: relative;
    cursor: pointer;
    /*.user-select-none();*/
    text-decoration: none;
    /*white-space:nowrap;*/
    & when (@centerText = true) {
        justify-content: center;
        align-items: center;
    }

    &.full-width {
        width: 100%;
    }

    & when (@hasShadow = true) {
        /* Button Shadow */
        /*box-shadow: inset 0px -4px 0px fade(@shadowColor, @shadowOpacity1);*/
        box-shadow: inset 0px -4px 0px rgba(0, 0, 0, 0.2);
    }

    & when (@hasBorder = true) {
        /* Border */
        border: @borderSize solid @borderColor;
    }

    & when not (@hasBorder = true) {
        border: none;
    }

    & when (@borderRadius > 0) {
        /* Border-Radius */
        border-radius: @borderRadius;
    }

    & when (@addIcon = true) {
        /* Icon */

        & when (@iconPosition = 'left') {
            &:before {
                .iconContent(@iconContent, @iconSize, @iconPosition);
            }
        }

        & when (@iconPosition = 'right') {
            &:after {
                .iconContent(@iconContent, @iconSize, @iconPosition);
            }
        }
    }

    &.sticky {
        position: fixed !important;
        width: 290px;
    }



    &.loading {
        &:after {
            background: url(img/Base/ico/loading.png) no-repeat 0 0;
            background-size: 19px 19px;
            transform: rotate(0deg);
            filter: blur(.6px);
            animation: spin 2s linear infinite;
        }
    }

    &.hover:not(.inactive),
    &:hover:not(.inactive) {
        & when (@hasShadow = true) {
            /*box-shadow: 0px 2px 4px fade(@shadowColor, @shadowOpacity2), inset 0px -4px 0px fade(@shadowColor, @shadowOpacity1);*/
            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25), inset 0px -4px 0px rgba(0, 0, 0, 0.2);
        }
        /*transform: translateY(-3px);*/

        & when not (@hoverBackgroundColor = '') {
            background-color: @hoverBackgroundColor;
        }

        & when not (@hoverColor = '') {
            color: @hoverColor;
        }

        & when (@hasBorder = true) and not (@hoverBorderColor = '') {
            /* Border */
            border: @borderSize solid @hoverBorderColor;
        }
    }

    &.inactive {
        & when not (@inactiveBackgroundColor = '') {
            background-color: @inactiveBackgroundColor;
        }

        & when not (@inactiveColor = '') {
            color: @inactiveColor;

            & when (@addIcon = true) {
                &::after {
                    color: @inactiveColor;
                }
            }
        }

        /*pointer-events: none;*/
        cursor: not-allowed;

        & when (@hasBorder = true) and not (@inactiveBorderColor = '') {
            /* Border */
            border: @borderSize solid @inactiveBorderColor;
        }
    }
}

/* Helper function to create the background-image url UNUSED AT THIS MOMENT */
.buttonIconUrl(@iconUrl, @iconPosition, @color) {
    @colorFileName: replace(@color, '#', '');
    background-image: url("@{iconUrl} @{iconPosition}_@{colorFileName}.svg");
}

/* Helper function to create the :before/:after pseudo element for the icons */
.iconContent(@iconContent, @iconSize, @iconPosition) {
    font-family: '@{pv-font-icons-name}';
    content: @iconContent;
    display: inline-block;
    pointer-events: none;

    & when (@iconPosition = 'right') {
        margin-left: 5px;
    }

    & when (@iconPosition = 'left') {
        margin-right: 5px;
    }
}

/* Generate buttons */
.button {
    &.primary-button {
        &.primary {
            .buttonGroup(@color-text-white, @color-primary, @color-text-white, @color-primary-dark-25, '', @color-primary-light-50, @color-primary-light-75, '', 2px, 12px, 16px, 10px, 12px, false, '', true, #000, 20%, 25%, 12%, true, 0, true);
        }

        &.cta {
            /* .buttonGroup(@color-text-white, @color-cta, @color-text-white, @color-cta-dark-25, '', @color-cta-light-25, @color-cta-light-50, '', 4px, 10px, 16px, 10px, 12px, false, '', true, #000, 20%, 11%, 12%, true, 0, true);*/
            .buttonGroup(@color-text-white, @color-secondary, @color-text-white, @color-secondary-dark-25, '', @color-secondary-dark-25, @color-secondary-light-50, '', 2px, 12px, 16px, 10px, 12px, false, '', true, #000, 20%, 25%, 12%, true, 0, true);
        }

        &.secondary {
            .buttonGroup(@color-text-white, @color-secondary, @color-text-white, @color-secondary-dark-25, '', @color-secondary-dark-25, @color-secondary-light-50, '', 2px, 12px, 16px, 10px, 12px, false, '', true, #000, 20%, 25%, 12%, true, 0, true);
        }
    }

    &.secondary-button {
        &.primary {
            .buttonGroup(@color-primary, @color-white, @color-primary-dark-25, @color-white, @color-primary-dark-25, @color-primary-light-50, @color-white, @color-primary-light-50, 2px, 12px, 16px, 10px, 12px, true, @color-primary, false, '', 0%, 0%, 0%, true, 1px, true);
        }

        &.cta {
            /*.buttonGroup(@color-cta, @color-white, @color-cta-dark-25, @color-white, @color-cta-dark-25, @color-cta-light-50, @color-white, @color-cta-light-50, 4px, 10px, 16px, 10px, 12px, true, @color-cta, false, '', 0%, 0%, 0%, true, 1px, true);*/
            .buttonGroup(@color-secondary, @color-white, @color-secondary-dark-25, @color-white, @color-secondary-dark-25, @color-secondary-light-50, @color-white, @color-secondary-light-50, 2px, 12px, 16px, 10px, 12px, true, @color-secondary, false, '', 0%, 0%, 0%, true, 1px, true);
        }

        &.secondary {
            .buttonGroup(@color-secondary, @color-white, @color-secondary-dark-25, @color-white, @color-secondary-dark-25, @color-secondary-light-50, @color-white, @color-secondary-light-50, 2px, 12px, 16px, 10px, 12px, true, @color-secondary, false, '', 0%, 0%, 0%, true, 1px, true);
        }
    }

    &.tertiary-button {
        &.primary {
            .buttonGroup(@color-primary, '', @color-primary-dark-25, '', @color-primary-dark-25, @color-primary-light-50, '', @color-primary-light-50, 2px, 0px, 0px, 10px, 12px, false, '', false, '', 0%, 0%, 0%, true, 0, false);
        }

        &.cta {
            /*.buttonGroup(@color-cta, '', @color-cta-dark-25, '', @color-cta-dark-25, @color-cta-light-50, '', @color-cta-light-50, 4px, 0px, 0px, 10px, 12px, false, '', false, '', 0%, 0%, 0%, true, 0, false);*/
            .buttonGroup(@color-secondary, '', @color-secondary-dark-25, '', @color-secondary-dark-25, @color-secondary-light-50, '', @color-secondary-light-50, 2px, 0px, 0px, 10px, 12px, false, '', false, '', 0%, 0%, 0%, true, 0, false);
        }

        &.secondary {
            .buttonGroup(@color-secondary, '', @color-secondary-dark-25, '', @color-secondary-dark-25, @color-secondary-light-50, '', @color-secondary-light-50, 2px, 0px, 0px, 10px, 12px, false, '', false, '', 0%, 0%, 0%, true, 0, false);
        }
    }
}