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

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



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

.button {
    position: relative;
    font-family: $font-base;
    font-size: 1.4rem;
    line-height: 3.3rem;
    text-transform: uppercase;
    text-decoration: none;
    background-color: color(blue);
    padding: 0.6rem 2rem;
    color: color(brand-sec);
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;

    &: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;

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

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

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

    &._loading {
        cursor: wait;
    }

    &.button--white {
        background-color: color(brand-sec);
        color: color(blue);

        &: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(blue);
        color: color(blue);

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

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

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