/*----------------------------------------------------------------------------*\
    BUTTON
\*----------------------------------------------------------------------------*/

/*  Variables
\*----------------------------------------------------------------------------*/



/*  Component
\*----------------------------------------------------------------------------*/

.button {
    position: relative;
    font-family: $font-base;
    font-size: 1.5rem;
    line-height: 1;
    text-decoration: none;
    background-color: color(brand);
    padding: 1.7rem 2.6rem;
    color: #fff;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
    font-weight: 500;
    border-radius: 0.5rem;

    &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        height: 0.1rem;
        width: 0;
        border-top: 0.1rem solid color(brand-sec);
        z-index: 2;
        -webkit-transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);
        transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);
    }

    &:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        height: 0;
        width: 0;
        border-top: 0.1rem solid color(brand-sec);
        z-index: 2;
        -webkit-transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);
        transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);
    }

    &:hover:not(:disabled) {
        background-color: color(green);
        color: color(brand-sec);
        -webkit-transition: all 500ms ease 300ms;
        transition: all 500ms ease 300ms;
        border-radius: 0;

        &:before {
            left: 0;
            width: 100%;
        }

        &:after {
            left: 0;
            width: 100%;
        }
    }

    &:focus {
        background-color: color(green);
    }

    &._loading {
        cursor: wait;
    }

    &.button--white {
        background-color: #fff;
        color: color(brand);

        &:before {
            border-top: 0.1rem solid color(green);
        }

        &:after {
            border-top: 0.1rem solid color(green);
        }

        &:hover {
            background-color: color(green);
            color: color(brand-sec);
        }
    }

    &.button--green {
        background-color: color(green);
        &:hover {
            background-color: color(brand);
        }
    }

    &.button--ghost {
        background-color: transparent;
        border: 0.1rem solid color(brand);
        color: color(brand);

        &:before, &:after {
            display: none;
        }

        &:hover {
            background: color(brand);
            color: color(brand-sec);
        }
    }

    &.button--grey {
        background-color: rgba(#000,0.03);
        color: color(tertiary);
        &:hover {
            background-color: color(brand);
        }
    }

    &.button--fullwidth {
        width: 100%;
    }
}