@include button-ui(
    $background-color: $button-background-color,
    $pressed-background-color: $button-pressed-background-color,

    $background-gradient: $button-background-gradient,
    $pressed-background-gradient: $button-pressed-background-gradient,

    $color: $button-color,
    $pressed-color: $button-pressed-color,

    $border-color: $button-border-color,
    $pressed-border-color: $button-pressed-border-color,


    $border-style: $button-border-style,
    $border-width: $button-border-width,

    $border-radius: $button-border-radius,
    $border-radius-big: $button-border-radius-big,

    $font-weight: $button-font-weight,
    $font-size: $button-font-size,
    $font-size-big: $button-font-size-big,
    $line-height: $button-line-height,
    $line-height-big: $button-line-height-big,
    $font-family: $button-font-family,

    $padding: $button-padding,
    $padding-big: $button-padding-big,

    $icon-size: $button-icon-size,
    $icon-size-big: $button-icon-size-big,
    $icon-font-size: $button-icon-font-size,
    $icon-font-size-big: $button-icon-font-size-big,
    $icon-horizontal-spacing: $button-icon-horizontal-spacing,
    $icon-horizontal-spacing-big: $button-icon-horizontal-spacing-big,
    $icon-vertical-spacing: $button-icon-vertical-spacing,
    $icon-vertical-spacing-big: $button-icon-vertical-spacing-big,

    $disabled-opacity: $button-disabled-opacity,

    $badge-background-color: $button-badge-background-color,
    $badge-background-gradient: $button-badge-background-gradient,
    $badge-color: $button-badge-color,
    $badge-border-color: $button-badge-border-color,
    $badge-border-radius: $button-badge-border-radius,
    $badge-min-width: $button-badge-min-width,
    $badge-max-width: $button-badge-max-width,
    $badge-font-weight: $button-badge-font-weight,
    $badge-font-size: $button-badge-font-size,
    $badge-font-family: $button-badge-font-family,
    $badge-line-height: $button-badge-line-height,
    $badge-top: $button-badge-top,
    $badge-right: $button-badge-right,
    $badge-bottom: $button-badge-bottom,
    $badge-left: $button-badge-left,
    $badge-padding: $button-badge-padding
);

@if $button-action-ui {
    @include button-action-ui;
}

@if $button-confirm-ui {
    @include button-confirm-ui;
}

@if $button-decline-ui {
    @include button-decline-ui;
}

@if $button-round-ui {
    @include button-round-ui;
}

// TODO: refactor toolbar, plain, and segmented
// Toolbar button styling
//.x-toolbar .x-button {
//    margin: 6px .2em;
//    padding: 0 .6em;
//
//    .x-button-label {
//        font-size: .7em;
//    }
//
//    .x-button-label, .x-hasbadge .x-badge {
//        line-height: 1.6em;
//    }
//
//    .x-button-icon {
//        &:before {
//            font-size: 1.3em;
//            line-height: 1.3em;
//        }
//    }
//}

// Plain buttons automatically use a margin trick to have a
// wide gradial glow for pressed state.
.x-button.x-button-plain,
.x-toolbar .x-button.x-button-plain {
    background: none;
    border: 0 none;
    min-height: 0;
    text-shadow: none;
    line-height: auto;
    height: 1.9em;
    padding: 0 0.5em;

    @if $include-border-radius {
        @include border-radius(none);
    }

    & > * {
        overflow: visible;
    }

    &.x-button-pressing, &.x-button-pressed {
        background: none;

        $mask-radial-glow: lighten($active-color, 50%);
        @include background-image(radial-gradient(fade-out($mask-radial-glow, .3), fade-out($mask-radial-glow, 1) 24px));
    }
}


// SegmentedButtons
.x-segmentedbutton .x-button {
    margin: 0;

    @if $include-border-radius {
        @include border-radius(0);

        &.x-first {
            @include border-left-radius($button-border-radius);
        }

        &.x-last {
            @include border-right-radius($button-border-radius);
        }
    }

    &:not(.x-first) {
        border-left: 0;
    }
}
