@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;
    & when (@centerText = true) {
        justify-content: center;
        align-items: center;
    }

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

    & when (@hasShadow = true) {
        /* Button Shadow */
        box-shadow: 0px 3px 1px -2px fade(@shadowColor, @shadowOpacity1), 0px 2px 2px fade(@shadowColor, @shadowOpacity2), 0px 1px 5px fade(@shadowColor, @shadowOpacity3);
    }

    & 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);
            }
        }
    }

    &.hover,
    &:hover {
        & 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;
        box-shadow: none;

        & 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, '', 4px, 10px, 16px, 10px, 12px, false, '', true, #000, 20%, 11%, 12%, true, 0, true);
        }

        &.cta {
            .buttonGroup(@color-text-white, @color-purchase, @color-text-white, @color-purchase-dark-25, '', @color-purchase-light-25, @color-purchase-light-50, '', 4px, 10px, 16px, 10px, 12px, false, '', true, #000, 20%, 11%, 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, '', 4px, 10px, 16px, 10px, 12px, false, '', true, #000, 20%, 11%, 12%, true, 0, true);
        }

        &.btn-groen {
            .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);
        }
    }

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

        &.cta {
            .buttonGroup(@color-cta, '', @color-cta-dark-25, '', @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);
        }

        &.secondary {
            .buttonGroup(@color-secondary, '', @color-secondary-dark-25, '', @color-secondary-dark-25, @color-secondary-light-50, @color-white, @color-secondary-light-50, 4px, 10px, 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, 4px, 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);
        }

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