/**
 * @class Ext.Button
 */

.x-button,
.x-tab {
    @include st-inline-box;
    @include st-box-align(center);

    position: relative;
    overflow: hidden;
    z-index: 1;
    cursor: pointer;

    &.x-hasbadge {
        overflow: visible;
    }

    &.x-disabled {
        cursor: default;
    }
}

.x-button-icon {
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
}

.x-button-icon.x-shown {
    display: block;
}

.x-button-icon.x-hidden {
    display: none;
}

// Button icon alignment
.x-iconalign-left,
.x-iconalign-right {
    @include st-box-orient(horizontal);

    > .x-button-label {
        @include st-box-flex(1);
    }
}

.x-iconalign-top,
.x-iconalign-bottom {
    @include st-box-orient(vertical);
    @include st-box-pack(center);

    > .x-button-label {
        width: 100%;
    }
}

.x-button-no-icon > .x-button-label {
    width: 100%;
}

.x-iconalign-bottom,
.x-iconalign-right {
    @include st-box-direction(reverse);
}

.x-iconalign-center {
    @include st-box-pack(center);
}

// Button labels
.x-button-label {
    @include st-box-flex(1, 'auto');
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    overflow: hidden;
}

.x-text-align-left > .x-button-label {
    text-align: left;
}

.x-text-align-right > .x-button-label {
    text-align: right;
}

.x-badge {
    z-index: 2;
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
