/*
 * Styling the Button widgets
 */
.button-widget {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    cursor: pointer;
    box-sizing: border-box;
    background: linear-gradient(to bottom, #fafafa 0%, #e4e4e4 100%);
    border: 1px solid #aaa;
    border-radius: 3px;
    color: #222;
}

.button-widget:hover {
    background: linear-gradient(to bottom, #ffffff 0%, #ececec 100%);
    border-color: #888;
}

.button-widget:active {
    background: linear-gradient(to bottom, #d8d8d8 0%, #e8e8e8 100%);
    border-color: #777;
}

.button-icon {
    display: block;
}

.button-text {
    display: block;
}

.button-icon + .button-text {
    margin-top: 2px;
}