@viewdo/dxp-story-player-assets/less/base/buttons.less

## Installation

.button-mixins(){

    .genButtonContainerClasses(stacked, @stackedButtonStyles);
    @stackedButtonStyles: {
        & .ivx-input-buttons{
            display: block;
            width: 100%;
        }
        & .ivx-input-buttons + .ivx-input-buttons{
            margin-top: .5rem;
        }
    };

    .genButtonContainerClasses(@containerType:default, @inputContainerButtonStyles: {}) when (@containerType = default){

        .ivx-input-container-buttons{
            @inputContainerButtonStyles();
        }

    }

    .genButtonContainerClasses(@containerType, @inputContainerButtonStyles: {}) when not (@containerType = default){

        .ivx-input-container-buttons-@{containerType}{
            @inputContainerButtonStyles();
        }

    }

    ._defaultButtonStyles{
        font-size: 1rem;
        border: none;
        padding: .75em 1.5em;
        box-sizing: border-box;
    }

    .genButtons(@buttonStyle:default, @defaultStyles: {}) when (@buttonStyle = default){
        .ivx-input-buttons{
            ._defaultButtonStyles;
            @defaultStyles();
        }
    }

    .genButtons(@buttonStyle, @customStyles) when not (@buttonStyle = default){
        .ivx-input-buttons-@{buttonStyle}{
            ._defaultButtonStyles;
            @customStyles();
        }
    }

    .createIconButtons(@icons){
        .ivx-input-buttons-icon{
            ._iconStyle();
            padding: .75em;
        }
        .ivx-input-buttons-icon-labeled{
            ._iconStyle();
            i{
                margin-right: .5em;
            }
        }
        .ivx-input-buttons-icon-labeled-right{
            ._iconStyle();
            text-align: left;
            i{
                margin-left: .5em;
                text-align: right;
                float: right;
            }
        }
        ._iconStyle(){
            i{
                height: 1.2em;
                width: 1.2em;
                margin: -.2em;
                font-family: @icons;
                font-size: 1.25em;
            }
            i:before{
                vertical-align: middle;
            }
        }
    }

    .setButtonProperties(@buttonType, @styles: {}) when (@buttonType = custom){
        .ivx-input-buttons{
            @styles();
        }
    }

    .setButtonProperties(@buttonType, @styles: {}) when not (@buttonType = default){
        .ivx-input-buttons-@{buttonType}{
            @styles();
        }
    }

}