@import '../1-Helpers/variables';
@import '../1-Helpers/mixins';
@import '../1-Helpers/themes';
@import '../2-Tools/transitions';

// By default it is a primary button
button, .btn {
    border-radius: 3px;
    transition: $transition-mid-out;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-block;
    // padding: .85rem 1.25rem;
    padding: .7rem .8rem;

    @include tablet-and-up {
        padding: .7rem 1rem;
    }

    // class specific styles
    // default
    background-color: $primary-color;
    color: white;

    // with icon
    &.has-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: .47rem 1rem;

        i.material-icons {
            margin-right: 10px;
            margin-left: -5px;
        }
    }

    // outline
    &.outline {
        color: $primary-color;
        border: 1px solid $primary-color;
        background-color: inherit;
        
        &:hover {
            background-color: $primary-color;
            color: white;
        }
        
        &.secondary {
            background: none; 
            border-color: $secondary-color;
            color: $secondary-color;
            
            &:hover {
                background: $secondary-color;
                color: white;
            }
        }

        &.green, &.success {
            background: none;
            border-color: $green;
            color: $green;

            &:hover {
                background: $green;
                color: white;
            }
        }

        &.red, &.error {
            background: none;
            border-color: $red;
            color: $red;

            &:hover {
                background: $red;
                color: white;
            }
        }
    }

    &.flat {
        color: $primary-color;
        background-color: inherit;

        &:hover {
            background-color: $grey-light-3;
            box-shadow: none;
        }
    }

    

    &.block {
        width: 100%;
    }

    &:hover {
        box-shadow: 0 3px 6px #00000029;
    }

    // button flavours
    &.radial {
        padding: 0;
        width: 45px;
        height: 45px;
        border-radius: 50%;

        &.has-icon {
            i.material-icons {
                margin: 0;
            }
            span {
                display: none;
            }

            &:hover {
                width: max-content;
                border-radius: 100px;

                i.material-icons {
                    margin-right: 10px;
                }

                span {
                    display: inline-block;
                }
            }
        }

        &.dense {
            width: 35px;
            height: 35px;

            i.material-icons {
                font-size: 20px;
            }
        }
    }

    &.fab {
        padding: 0;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        position: absolute;
        bottom: 3.5rem;
        right: .75rem;
        position: fixed;

        @include tablet-and-up {
            botto: 2rem;
        }
    }

}