/* extjs-like <button> */

.button
{
    cursor: pointer;
    vertical-align: middle;
    border: 1px solid #d8d8d8;
    outline: none;
    position: relative;
    background: #f5f5f5;
    border-radius: 3px;
    font-size: inherit;
    line-height: 2em;
    padding: 0 .6em;
    color: #606060;
}

.button::-moz-focus-inner
{
    border: 0;
}

.button:focus:after
{
    content: " ";
    display: block;
    border: 1px solid #4196d4;
    border-radius: 2px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.button:not([disabled]):hover
{
    border: 1px solid #cfcfcf;
    background: #ebebeb;
}

.button:not([disabled]):active, .button.pressed
{
    border: 1px solid #c6c6c6;
    background: #e1e1e1;
}

.button[disabled]
{
    color: #c0c0c0;
    cursor: default;
}

.button :global(span.material-icons)
{
    font-size: inherit;
    line-height: 100%;
    vertical-align: middle;
}

.button.blue
{
    background: #3892d3;
    border-color: #157fcc;
    color: white;
}

.button.blue:focus:after
{
    border: 1px solid white;
}

.button.blue:not([disabled]):hover
{
    border: 1px solid #1374bb;
    background: #3386c2;
}

.button.blue:not([disabled]):active, .button.blue.pressed
{
    border: 1px solid #0f5f99;
    background: #2a6d9e;
}

.button.blue[disabled]
{
    color: white;
    opacity: 0.5;
    cursor: default;
}