/* Persona Button by Sawyer Hollenshead */
/* Link body */
.persona-button{
    color: #fff !important;
    display: inline-block;
    font-size: 13px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    line-height: 1.1;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    text-shadow: 0 1px rgba(0,0,0,0.5), 0 0 2px rgba(0,0,0,0.2);

    background: #297dc3;
    background: -moz-linear-gradient(top, #43a6e2, #287cc2);
    background: -ms-linear-gradient(top, #43a6e2, #287cc2);
    background: -o-linear-gradient(top, #43a6e2, #287cc2);
    background: -webkit-linear-gradient(top, #43a6e2, #287cc2);
    background: linear-gradient(top, #43a6e2, #287cc2);

    -moz-border-radius: 	3px;
    -ms-border-radius: 		3px;
    -o-border-radius: 		3px;
    -webkit-border-radius: 	3px;
    border-radius: 			3px;

    -moz-box-shadow: 	0 1px 0 rgba(0,0,0,0.2);
    -ms-box-shadow: 	0 1px 0 rgba(0,0,0,0.2);
    -o-box-shadow: 		0 1px 0 rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.2);
    box-shadow: 		0 1px 0 rgba(0,0,0,0.2);
}

.persona-button:hover{
    background: #21669f;
    background: -moz-linear-gradient(top, #3788b9, #21669f);
    background: -ms-linear-gradient(top, #3788b9, #21669f);
    background: -o-linear-gradient(top, #3788b9, #21669f);
    background: -webkit-linear-gradient(top, #3788b9, #21669f);
    background: linear-gradient(top, #3788b9, #21669f);
}

.persona-button:active, .persona-button:focus{
    top: 1px;
    -moz-box-shadow: 	none;
    -ms-box-shadow: 	none;
    -o-box-shadow: 		none;
    -webkit-box-shadow: none;
    box-shadow: 		none;
}

.persona-button span{
    display: inline-block;
    padding: 5px 10px 5px 40px;
}

/* Icon */
.persona-button span:after{
    background: url(/static/auth/img/persona-logo.png) 10px center no-repeat;
    content: '';
    display: block;
    width: 31px;

    position: absolute;
    bottom: 0;
    left: -3px;
    top: 0;
    z-index: 10;
}

/*  Icon background */
.persona-button span:before{
    content: '';
    display: block;
    height: 100%;
    width: 20px;

    position: absolute;
    bottom: 0;
    left: 0;
    top: 0;
    z-index: 1;

    background: #42a9dd;
    background: -moz-linear-gradient(top, #50b8e8, #3095ce);
    background: -ms-linear-gradient(top, #50b8e8, #3095ce);
    background: -o-linear-gradient(top, #50b8e8, #3095ce);
    background: -webkit-linear-gradient(top, #50b8e8, #3095ce);
    background: linear-gradient(top, #50b8e8, #3095ce);

    -moz-border-radius: 	3px 0 0 3px;
    -ms-border-radius: 		3px 0 0 3px;
    -o-border-radius: 		3px 0 0 3px;
    -webkit-border-radius: 	3px 0 0 3px;
    border-radius: 			3px 0 0 3px;
}

/* Triangle */
.persona-button:before{
    background: #42a9dd;
    content: '';
    display: block;
    height: 26px;
    width: 26px;

    position: absolute;
    left: 2px;
    top: 50%;
    margin-top: -13px;
    z-index: 0;

    background: -moz-linear-gradient(-45deg, #50b8e8, #3095ce);
    background: -ms-linear-gradient(-45deg, #50b8e8, #3095ce);
    background: -o-linear-gradient(-45deg, #50b8e8, #3095ce);
    background: -webkit-linear-gradient(-45deg, #50b8e8, #3095ce);
    background: linear-gradient(-45deg, #3095ce, #50b8e8); /* flipped for updated spec */

    -moz-box-shadow: 	1px -1px 1px rgba(0,0,0,0.1);
    -ms-box-shadow: 	1px -1px 1px rgba(0,0,0,0.1);
    -o-box-shadow: 		1px -1px 1px rgba(0,0,0,0.1);
    -webkit-box-shadow: 1px -1px 1px rgba(0,0,0,0.1);
    box-shadow: 		1px -1px 1px rgba(0,0,0,0.1);

    -moz-transform: 	rotate(45deg);
    -ms-transform: 		rotate(45deg);
    -o-transform: 		rotate(45deg);
    -webkit-transform: 	rotate(45deg);
    transform: 			rotate(45deg);
}

/* Inset shadow (required here because the icon background clips it when on the `a` element) */
.persona-button:after{
    content: '';
    display: block;
    height: 100%;
    width: 100%;

    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 10;

    -moz-border-radius: 	3px;
    -ms-border-radius: 		3px;
    -o-border-radius: 		3px;
    -webkit-border-radius: 	3px;
    border-radius: 			3px;

    -moz-box-shadow: 	inset 0 -1px 0 rgba(0,0,0,0.3);
    -ms-box-shadow: 	inset 0 -1px 0 rgba(0,0,0,0.3);
    -o-box-shadow: 		inset 0 -1px 0 rgba(0,0,0,0.3);
    -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3);
    box-shadow: 		inset 0 -1px 0 rgba(0,0,0,0.3);
}

/* ========================================================
*		Dark button
* ===================================================== */
.persona-button.dark{
    background: #3c3c3c;
    background: -moz-linear-gradient(top, #606060, #3c3c3c);
    background: -ms-linear-gradient(top, #606060, #3c3c3c);
    background: -o-linear-gradient(top, #606060, #3c3c3c);
    background: -webkit-linear-gradient(top, #606060, #3c3c3c);
    background: linear-gradient(top, #606060, #3c3c3c);
}
.persona-button.dark:hover{
    background: #2d2d2d;
    background: -moz-linear-gradient(top, #484848, #2d2d2d);
    background: -ms-linear-gradient(top, #484848, #2d2d2d);
    background: -o-linear-gradient(top, #484848, #2d2d2d);
    background: -webkit-linear-gradient(top, #484848, #2d2d2d);
    background: linear-gradient(top, #484848, #2d2d2d);
}
.persona-button.dark span:before{ /* Icon BG */
    background: #d34f2d;
    background: -moz-linear-gradient(top, #ebac45, #d34f2d);
    background: -ms-linear-gradient(top, #ebac45, #d34f2d);
    background: -o-linear-gradient(top, #ebac45, #d34f2d);
    background: -webkit-linear-gradient(top, #ebac45, #d34f2d);
    background: linear-gradient(top, #ebac45, #d34f2d);
}
.persona-button.dark:before{ /* Triangle */
    background: #d34f2d;
    background: -moz-linear-gradient(-45deg, #ebac45, #d34f2d);
    background: -ms-linear-gradient(-45deg, #ebac45, #d34f2d);
    background: -o-linear-gradient(-45deg, #ebac45, #d34f2d);
    background: -webkit-linear-gradient(-45deg, #ebac45, #d34f2d);
    background: linear-gradient(-45deg, #d34f2d, #ebac45); /* flipped for updated spec */
}
