.#{$prefix}icon {
    width: 16px;
    height: 16px;
}
.#{$prefix}button {
    @if $touchscreen {
        font-size: 24px;
        padding: 10px;
        font-weight: bold;
    }
    @else {
        font-size: 8pt;
        padding: 3px;
    }
    background: -moz-linear-gradient(top, $button-base-color + #101010, $button-base-color);
    background: -webkit-linear-gradient(top, $button-base-color + #101010, $button-base-color);
    background-repeat: none;
    border: 1px solid ($button-base-color - #333);
    border-radius: 3px;

    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    align-items: center;
    text-decoration: none;
    color: $button-text-color;
    flex-shrink: 0;

    &:hover {
        border-color: $button-base-color - #333;
    }
}
.#{$prefix}button-label {
    margin: 0 4px;
    @if not $touchscreen {
        height: 16px;
    }
}
.#{$prefix}button-icon {
    width: 16px;
    height: 16px;
}
.#{$prefix}button-disabled {
    color: $button-text-color + #aaa;
    background: -moz-linear-gradient(top, $button-base-color + #101010, $button-base-color - #222);
    background: -webkit-linear-gradient(top, $button-base-color + #101010, $button-base-color - #222);
}
.#{$prefix}button-disabled:hover {
    border-color: $button-base-color - #333;
}
.#{$prefix}button-disabled .#{$prefix}button-icon {
    opacity: 0.5;
}


