//  ----------------------------------------------------------------------------
//
//  @BUTTON
//
//  Component styling for button
//
//  ----------------------------------------------------------------------------
//
//  CONTENTS
//
//      1.  DEPENDENCIES
//      2.  VARIABLES
//      3.  CORE
//      4.  SIZE - LARGE
//      5.  SIZE - SMALL
//      6.  SIZE - EXTRA SMALL
//      7.  SHAPE - FULL
//      8.  SHAPE - PILL
//      9.  VARIANT - ACTION
//      10. VARIANT - PRIMARY
//      11. VARIANT - PRIMARY OUTLINE
//      12. VARIANT - SECONDARY
//      13. VARIANT - SECONDARY OUTLINE
//      14. VARIANT - POSITIVE
//      15. VARIANT - NEGATIVE
//      16. APPLICATION - ICON
//      17. APPLICATION - DROPDOWN
//      18. APPLICATION - GROUP
//
//  ----------------------------------------------------------------------------


//  1. DEPENDENCIES
//  ----------------------------------------------------------------------------

@import '../../../core/src/variables';
@import '../../../core/src/animations';
@import '../../../core/src/mixins';



//  2. VARIABLES
//  ----------------------------------------------------------------------------

@import 'variables';


//  3. CORE
//  ----------------------------------------------------------------------------

@if $use-component-button {
    .c-btn {
        background-color: transparent;
        border: $button-border-width solid transparent;
        border-radius: $button-radius;
        color: $button-font-color;
        cursor: pointer;
        display: inline-flex;
        font-family: $button-font-family;
        font-size: $button-font-size;
        font-weight: $button-font-weight;
        align-items: center;
        justify-content: center;
        line-height: $button-font-height;
        padding: ($button-padding-vertical) ($button-padding-horizontal);
        outline: none !important;
        position: relative;
        text-align: center !important;
        text-decoration: none !important;
        transition: $button-transition;
        vertical-align: top;
        white-space: nowrap;
    }

    // State : Active
    .c-btn:active,
    .c-btn:focus {
        outline: none;
    }

    // State : Disabled
    .c-btn:disabled,
    .c-btn.is--disabled {
        cursor: default;
        pointer-events: none;
    }

    .c-btn.is--loading {
        color: transparent !important;
    }

    //  4. SIZE - LARGE
    //  ----------------------------------------------------------------------------

    .c-btn--lg {
        border-radius: $button-lg-radius;
        font-size: $button-lg-font-size;
        line-height: $button-lg-font-height;
        padding: ($button-lg-padding-vertical) ($button-lg-padding-horizontal);

        > .icon {
            font-size: $button-lg-icon-size;
        }
    }


    //  5. SIZE - SMALL
    //  ----------------------------------------------------------------------------

    .c-btn--sm {
        font-size: $button-sm-font-size;
        line-height: $button-sm-font-height;
        padding: ($button-sm-padding-vertical) ($button-sm-padding-horizontal);
    }


    //  6. SIZE - EXTRA SMALL
    //  ----------------------------------------------------------------------------

    .c-btn--xs {
        font-size: $button-xs-font-size;
        line-height: $button-xs-font-height;
        padding: ($button-xs-padding-vertical) ($button-xs-padding-horizontal);
    }


    //  7. SHAPE - FULL
    //  ----------------------------------------------------------------------------

    .c-btn--full {
        width: 100%;
    }


    //  8. SHAPE - PILL
    //  ----------------------------------------------------------------------------

    .c-btn--pill {
        border-radius: 1000px;
    }


    //  9. VARIANT - ACTION
    //  ----------------------------------------------------------------------------
    //  Use this button as marketting button

    .c-btn--action {
        background-color: $button-action;
        color: $button-action-color;

        &:hover,
        &:active,
        &.is--active {
            background-color: $button-action-hover;
        }

        &.is--loading:before {
            @include loader-setup($button-action-loader-first, $button-action-loader-second);
        }

        &:disabled,
        &.is--disabled {
            opacity: $button-disable-opacity;
        }
    }


    //  10. VARIANT - PRIMARY
    //  ----------------------------------------------------------------------------
    //  Use this button as a dominant or go to button.

    .c-btn--primary {
        background-color: $button-primary-fill;
        border-color: $button-primary-border;
        color: $button-primary-color;

        &:hover {
            background-color: $button-primary-hover-fill;
            border-color: $button-primary-hover-border;
            color: $button-primary-hover-color;
        }

        &:focus,
        &:active,
        &.is--active {
            background-color: $button-primary-active-fill;
            border-color: $button-primary-active-border;
            color: $button-primary-active-color;
        }

        &.is--loading:before {
            @include loader-setup($button-primary-loader-first, $button-primary-loader-second);
        }

        &:disabled,
        &.is--disabled {
            opacity: $button-disable-opacity;
        }
    }


    //  11. VARIANT - PRIMARY OUTLINE
    //  ----------------------------------------------------------------------------
    //  TBD

    .c-btn--primary-outline {
        background-color: $button-primary-outline-fill;
        border-color: $button-primary-outline-border;
        color: $button-primary-outline-color;

        &:hover {
            background-color: $button-primary-outline-hover-fill;
            border-color: $button-primary-outline-hover-border;
            color: $button-primary-outline-hover-color;
        }

        &:active,
        &:focus,
        &.is--active,
        .is--active > & {
            background-color: $button-primary-outline-active-fill;
            border-color: $button-primary-outline-active-border;
            color: $button-primary-outline-active-color;
        }

        &.is--loading:before {
            @include loader-setup($button-primary-outline-loader-first, $button-primary-outline-loader-second);
        }

        &:disabled,
        &.is--disabled {
            opacity: $button-disable-opacity;
        }
    }


    //  12. VARIANT - SECONDARY
    //  ----------------------------------------------------------------------------
    //  Use this button as a normal button.

    .c-btn--secondary {
        background-color: $button-secondary-fill;
        border-color: $button-secondary-border;
        color: $button-secondary-color;

        &:hover {
            background-color: $button-secondary-hover-fill;
            border-color: $button-secondary-hover-border;
            color: $button-secondary-hover-color;
        }

        &:focus,
        &:active,
        &.is--active {
            background-color: $button-secondary-active-fill;
            border-color: $button-secondary-active-border;
            color: $button-secondary-active-color;
        }

        &.is--loading:before {
            @include loader-setup($button-secondary-loader-first, $button-secondary-loader-second);
        }

        &:disabled,
        &.is--disabled {
            opacity: $button-secondary-disable-opacity;
        }
    }


    //  13. VARIANT - SECONDARY OUTLINE
    //  ----------------------------------------------------------------------------
    //  TBD

    .c-btn--secondary-outline {
        background-color: $button-secondary-outline-fill;
        border-color: $button-secondary-outline-border;
        color: $button-secondary-outline-color;

        &:hover {
            background-color: $button-secondary-outline-hover-fill;
            border-color: $button-secondary-outline-hover-border;
            color: $button-secondary-outline-hover-color;
        }

        &:active,
        &:focus,
        &.is--active,
        .is--active > & {
            background-color: $button-secondary-outline-active-fill;
            border-color: $button-secondary-outline-active-border;
            color: $button-secondary-outline-active-color;
        }

        &.is--loading:before {
            @include loader-setup($button-primary-outline-loader-first, $button-primary-outline-loader-second);
        }

        &:disabled,
        &.is--disabled {
            opacity: $button-disable-opacity;
        }
    }


    //  14. VARIANT - POSITIVE
    //  ----------------------------------------------------------------------------
    //  TBD

    .c-btn--positive {
        background-color: $button-positive-fill;
        border-color: $button-positive-border;
        color: $button-positive-color;

        &:hover {
            background-color: $button-positive-hover-fill;
            border-color: $button-positive-hover-border;
            color: $button-positive-hover-color;
        }

        &:focus,
        &:active,
        &.is--active {
            background-color: $button-positive-active-fill;
            border-color: $button-positive-active-border;
            color: $button-positive-active-color;
        }

        &.is--loading:before {
            @include loader-setup($button-positive-loader-first, $button-positive-loader-second);
        }

        &:disabled,
        &.is--disabled {
            opacity: $button-disable-opacity;
        }
    }


    //  15. VARIANT - NEGATIVE
    //  ----------------------------------------------------------------------------
    //  TBD

    .c-btn--negative {
        background-color: $button-negative-fill;
        border-color: $button-negative-border;
        color: $button-negative-color;

        &:hover {
            background-color: $button-negative-hover-fill;
            border-color: $button-negative-hover-border;
            color: $button-negative-hover-color;
        }

        &:focus,
        &:active,
        &.is--active {
            background-color: $button-negative-active-fill;
            border-color: $button-negative-active-border;
            color: $button-negative-active-color;
        }

        &.is--loading:before {
            @include loader-setup($button-negative-loader-first, $button-negative-loader-second);
        }

        &:disabled,
        &.is--disabled {
            opacity: $button-disable-opacity;
        }
    }


    //  16. APPLICATION - ICON
    //  ----------------------------------------------------------------------------

    // Icon's spacing
    .c-btn > .icon {
        font-size: 16px;
        margin-right: $spacing-sm;
        margin-left: -$spacing-xxs;

        &,
        &::before {
            height: auto;
            line-height: inherit;
        }

        &:last-child {
            margin-right: -$spacing-xxs;
            margin-left: $spacing-sm;
        }
    }

    // For icon only button, no text
    .c-btn--icon {
        > .icon {
            margin: 0 (-$spacing-xxs) !important;
        }
    }


    //  17. APPLICATION - DROPDOWN
    //  ----------------------------------------------------------------------------
    //  NOTE: Need to resolve icons first OR maybe just use .icon instead, less dependency

    // .c-btn--dropdown {
    //     &:after {
    //         content: '\e313';
    //         display: inline-block;
    //         line-height: inherit;
    //         font-family: $base-font-icon;
    //         font-size: 20px;
    //         margin: 0 (-$spacing-xs) 0 $spacing-xxs;
    //         opacity: .5;
    //         vertical-align: top;
    //     }
    // }


    //  18. APPLICATION - GROUP
    //  ----------------------------------------------------------------------------

    .c-btn-group {
        display: inline-flex;
        vertical-align: middle;

        > .c-btn,
        > .c-dropdown > .c-btn {
            border-radius: 0;
            flex: 1;

            &:hover,
            &.is--active {
                z-index: 1;
            }

            &.is--disabled,
            &:disabled {
                z-index: 0;
            }
        }

        .c-btn,
        .c-dropdown {
            &:not(:first-child) {
                margin-left: -1px;
            }
        }

        > .c-btn:first-child,
        > .c-dropdown:first-child > .c-btn {
            border-top-left-radius: $button-radius;
            border-bottom-left-radius: $button-radius;
        }

        > .c-btn:last-child,
        > .c-dropdown:last-child > .c-btn {
            border-top-right-radius: $button-radius;
            border-bottom-right-radius: $button-radius;
        }
    }

    .c-btn-group--full {
        display: flex;
    }
}