$icon-btn-size: 22px;
$icon-btn-margin: 2px;
$icon-btn-color: $btn-default-color;
$icon-btn-bg: $btn-default-bg;
$icon-btn-border: $btn-default-border;

.icon-btn {
    display: inline-block;
    height: $icon-btn-size;
    width: $icon-btn-size;

    // center the icon
    text-align: center;
    line-height: $icon-btn-size - 3;

    // colors and borders
    border-radius: 3px;
    border: 1px solid $icon-btn-border;
    background-color: $icon-btn-bg;
    color: $icon-btn-color;

    cursor: pointer;

    &:focus,
    &:hover {
        outline: 0;
        background-color: white;
        color: $brand-info;
    }
}

.icon-btn.disabled {
    background-color: transparent;
    color: #bbb;
    border-color: #bbb;
}

.icon-btn-group {
    display: inline-block;
    .icon-btn:not(:last-of-type) {
        margin: 0px;
        border-radius: 0px;
        border-right: none;
    }
    .icon-btn:first-child {
        margin-right: 0px;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
    }
    .icon-btn:last-child {
        margin-left: 0px;
        border-radius: 0px 3px 3px 0px;
    }
    .icon-btn:only-child {
        margin: 0px;
        border-radius: 3px;
    }
}