/* Button
   ========================================================================== */

/**
 * jQuery UI Button.
 *
 * Some classes and HTML elements generally added via JavaScript, more info -
 * https://jqueryui.com/button/
 *
 * 1. The `overflow` property removes extra width in IE.
 * 2. Correct font size not being inherited in all browsers.
 * 3. Remove iOS Safari default styling.
 * 4. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 *
 * Example HTML:
 *
 * <a class="ui-button ui-corner-all ui-widget">Button</a>
 */

.ui-button {
    @include gradient-linear($color-button-gradient-from, $color-button-gradient-to);

    display: inline-block;
    position: relative;
    box-sizing: border-box;
    height: 2.307692307692308em; // 30px / 13px
    margin: 0;
    padding: 0.30769230769231em 0.61538461538462em; // 4px / 13px + 8px / 13px
    /* 1 */
    overflow: visible;
    border: 1px solid $color-button-border;
    background-clip: padding-box;
    color: $color-text-button;
    font-family: inherit;
    /* 2 */
    font-size: 1rem;
    line-height: $base-line-height;
    vertical-align: baseline;
    text-align: center;
    /* 3 */
    appearance: none;
    /* 4 */
    cursor: pointer;
    user-select: none;

    &:hover {
        @include gradient-linear(lighten($color-button-gradient-from, 4%), lighten($color-button-gradient-to, 4%));

        border-color: darken($color-button-border, 13%);
        color: $color-text-button-hover;
        text-decoration: none;
    }

    &:active {
        @include gradient-linear(darken($color-button-gradient-from, 3%), darken($color-button-gradient-to, 3%));

        border-color: darken($color-button-border, 13%);
        color: $color-text-button-active;
        text-decoration: none;

        @if $flat-theme < 1 {
            box-shadow: $inset-lowlighting;
        }
    }

    &:focus {
        border-color: $color-link-focus;
        outline: 2px solid transparent; // Allows for repainting in high contrast modes.
        color: $color-text-button-active;
    }
}

@include dark-mode {
    .ui-button {
        color: $dark-color-text-button;

        &:focus {
            border-color: $dark-color-link-focus;
        }
    }
}

/**
 * Focus styling for buttons.
 *
 * 1. `!important` required to override specificity.
 */

.ui-button.ui-state-focus {
    border-color: $color-link-focus !important; /* 1 */
}

@include dark-mode {
    .ui-button.ui-state-focus {
        border-color: $dark-color-link-focus !important; /* 1 */
    }
}

/**
 * Single-icon-only button.
 *
 * To make room for the icon, a width needs to be set here.
 *
 * Example HTML:
 *
 * <a class="ui-button ui-corner-all ui-widget ui-button-icon-only">
 *     <span class="ui-button-icon ui-icon ui-icon-gear"></span>
 *     <span class="ui-button-icon-space"> </span>
 *     Button one icon, no text
 * </a>
 */

.ui-button-icon-only {
    box-sizing: border-box;
    width: 2.1538462em; // 28px / 13px
    text-indent: -9999px;
    white-space: nowrap;
}

/**
 * No icon support for input elements.
 */

input.ui-button.ui-button-icon-only {
    text-indent: 0;
}

@if $border-radius > 0 {
    .ui-button.ui-corner-all {
        border-radius: $border-radius;
    }

    .ui-button.ui-corner-right {
        border-radius: 0 $border-radius $border-radius 0;

        [dir="rtl"] & {
            border-radius: $border-radius 0 0 $border-radius;
        }
    }

    .ui-button.ui-corner-left {
        border-radius: $border-radius 0 0 $border-radius;

        [dir="rtl"] & {
            border-radius: 0 $border-radius $border-radius 0;
        }
    }
}

/**
 * Button icon element(s).
 */

.ui-button-icon-only .ui-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -8px;
    margin-left: -8px;
}

.ui-button.ui-icon-notext .ui-icon {
    padding: 0;
    text-indent: -9999px;
    white-space: nowrap;
}

input.ui-button.ui-icon-notext .ui-icon {
    padding: 0.4em 1em;
    text-indent: 0;
    white-space: normal;
}