/* ============================================
   BUTTONS
   Platform-wide button styles
   ============================================ */

/* Base button styles - Platform standard */
.btn {
    -webkit-border-radius: 0 0 0 0;
    -moz-border-radius: 0 0 0 0;
    border-radius: 0;
    text-shadow: none;
    box-shadow: none !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 16px;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    min-height: 30px;
    display: inline-block;
    margin: 0px 2px;
    width: auto;
}

    .btn i:before {
        font-size: 12px !important;
    }

    .btn.box i:before {
        color: #fff;
    }

/* Default button style - applies tertiary styling when no variant specified */
.btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-tertiary) {
    background: #f3f3f3;
    color: #777;
    border: none;
}

    .btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-tertiary):hover {
        background: #e0e0e0;
    }

    .btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-tertiary):active {
        background: #d0d0d0;
    }

/* Default box button style - applies tertiary box styling when no variant specified */
.btn.box:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-tertiary) {
    background: white;
    border: 1px solid #777;
    color: #777;
}

    .btn.box:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-tertiary):hover {
        background: #f9f9f9;
        border-color: #666;
        color: #666;
    }

    .btn.box:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-tertiary):active {
        background: #f0f0f0;
        border-color: #555;
        color: #555;
    }

/* Button variants */
.btn-primary {
    background-color: #4285f4;
    color: white;
}

    .btn-primary:hover {
        background-color: #357abd;
    }

    .btn-primary:active {
        background-color: #2c5fa3;
    }

.btn-success {
    background-color: #34a853;
    color: white;
}

    .btn-success:hover {
        background-color: #2d8e47;
    }

    .btn-success:active {
        background-color: #26783c;
    }

.btn-danger {
    background-color: #ea4335;
    color: white;
}

    .btn-danger:hover {
        background-color: #d33426;
    }

    .btn-danger:active {
        background-color: #b8281f;
    }

.btn-tertiary,
input.btn.btn-tertiary,
button.btn.btn-tertiary,
a.btn.btn-tertiary {
    background: #f3f3f3;
    color: #777;
    border: none;
}

    .btn-tertiary:hover {
        background: #e0e0e0;
    }

    .btn-tertiary:active {
        background: #d0d0d0;
    }

/* Button sizes */
.btn-sm {
    padding: 6px 12px;
    font-size: 11px;
    min-height: 26px;
}

.btn-lg {
    padding: 10px 20px;
    font-size: 13px;
    min-height: 36px;
}

/* Outlined button variant - .box modifier */
.btn-primary.box {
    background: white;
    border: 1px solid #4285f4;
    color: #4285f4;
}

    .btn-primary.box:hover {
        background: #f0f7ff;
        border-color: #357abd;
        color: #357abd;
    }

    .btn-primary.box:active {
        background: #e3f2fd;
        border-color: #2c5fa3;
        color: #2c5fa3;
    }

.btn-success.box {
    background: white;
    border: 1px solid #34a853;
    color: #34a853;
}

    .btn-success.box:hover {
        background: #f1f9f3;
        border-color: #2d8e47;
        color: #2d8e47;
    }

    .btn-success.box:active {
        background: #e6f4e9;
        border-color: #26783c;
        color: #26783c;
    }

.btn-danger.box {
    background: white;
    border: 1px solid #ea4335;
    color: #ea4335;
}

    .btn-danger.box:hover {
        background: #fef3f2;
        border-color: #d33426;
        color: #d33426;
    }

    .btn-danger.box:active {
        background: #fde7e5;
        border-color: #b8281f;
        color: #b8281f;
    }

.btn-tertiary.box {
    background: white;
    border: 1px solid #777;
    color: #777;
}

    .btn-tertiary.box:hover {
        background: #f9f9f9;
        border-color: #666;
        color: #666;
    }

    .btn-tertiary.box:active {
        background: #f0f0f0;
        border-color: #555;
        color: #555;
    }