/* Buttons
   ========================================================================== */

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 */

button {
    text-transform: none;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    padding: 0;
    border-style: none;
}

/**
 * 1. Remove iOS Safari default styling.
 * 2. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
[type="reset"],
[type="submit"],
input[type="button"],
.txp-button,
.txp-logout a,
.navlink,
.navlink-active {
    @include gradient-linear($color-button-gradient-from, $color-button-gradient-to);

    display: inline-block;
    width: auto;
    height: 2.307692307692308em; // 30px / 13px
    padding: 0.30769230769231em 0.61538461538462em; // 4px / 13px + 8px / 13px
    border: 1px solid $color-button-border;
    border-radius: $border-radius;
    background-clip: padding-box;
    color: $color-text-button;
    font-weight: normal;
    text-align: center;
    /* 1 */
    appearance: none;
    /* 2 */
    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 {
    button,
    [type="reset"],
    [type="submit"],
    input[type="button"],
    .txp-button,
    .navlink,
    .navlink-active {
        color: $dark-color-text-button;

        &:hover {
            color: $dark-color-text-button-hover;
        }

        &:active {
            color: $dark-color-text-button-active;
        }

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

/**
 * Additional styling for primary buttons.
 *
 * Example HTML:
 *
 * <input type="submit" class="publish">
 */

[type="submit"].publish,
button.publish,
a.publish {
    @include gradient-linear($color-button-primary-gradient-from, $color-button-primary-gradient-to);

    height: 2.76923076923077em; // 36px / 13px
    padding: 0.61538461538462em 1em; // 8px / 13px + 13px
    border: 1px solid $color-button-primary-border;
    font-weight: bold;

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

        border: 1px solid darken($color-button-primary-border, 10%);
    }

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

        border: 1px solid darken($color-button-primary-border, 10%);
    }

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

@include dark-mode {
    [type="submit"].publish,
    button.publish,
    a.publish {
        &:focus {
            border-color: $dark-color-link-focus-alt;
            outline: 2px solid transparent; // Allows for repainting in high contrast modes.
        }
    }
}

/**
 * Additional styling for delete (destroy) buttons.
 *
 * Example HTML:
 *
 * <button class="destroy" type="submit">
 *     <span class="ui-icon ui-icon-close">Destroy</span>
 * </button>
 */

button.destroy {
    height: auto;
    padding: 0.07692307692308em 0 0; // 1px / 13px
    border: 0;

    @if $border-radius > 0 {
        border-radius: 0;
    }

    background: none;

    &:hover,
    &:active {
        background: none;
        box-shadow: none;
    }

    &:focus {
        outline: thin solid $color-link-focus;
    }

    .ui-icon {
        opacity: 0.66;
    }

    &:hover .ui-icon,
    &:active .ui-icon {
        opacity: 1;
    }
}

@include dark-mode {
    button.destroy {
        &:focus {
            outline: thin solid $dark-color-link-focus;
        }

        .ui-icon {
            opacity: 1;
        }

        &:hover .ui-icon,
        &:active .ui-icon,
        &:hover .ui-icon,
        &:active .ui-icon {
            filter: brightness(2.5) sepia(1) hue-rotate(-62deg) saturate(750%) brightness(100%);
        }
    }

    a.destroy.ui-icon {
        opacity: 1;

        &:hover,
        &:active {
            filter: brightness(2.5) sepia(1) hue-rotate(-62deg) saturate(750%) brightness(100%);
        }
    }
}

/**
 * Grey-out disabled navlinks (but keep them in button style).
 *
 * Example HTML:
 *
 * <p class="prev-next">
 *     <span class="navlink-disabled">Previous</span>
 *     <a class="navlink">Next</a>
 * </p>
 */

.navlink-disabled {
    display: inline-block;
    box-sizing: border-box;
    height: 2.307692307692308em; // 30px / 13px
    padding: 0.30769230769231em 0.61538461538462em; // 4px / 13px + 8px / 13px
    border: 1px solid;

    @if $border-radius > 0 {
        border-radius: $border-radius;
    }

    background-clip: padding-box;
}

@include dark-mode {
    .navlink-disabled {
        @include gradient-linear($color-button-gradient-from, $color-button-gradient-to);
    }
}

/**
 * Tertiary button sets.
 *
 * Anchor elements kept to one line to prevent space between buttons.
 *
 * Example HTML:
 *
 * <p class="nav-tertiary">
 *     <a class="navlink-active">Page 1</a><a class="navlink">Page 2</a>
 * </p>
 */

ul.nav-tertiary {
    padding: 0;
    list-style: none;

    li {
        display: inline;
    }
}

[dir="rtl"] ul.nav-tertiary {
    padding: 0;
}

@if $border-radius > 0 {
    .nav-tertiary {
        > * {
            border-radius: 0;
        }

        > :first-child,
        > :first-child > a,
        > :first-child > span {
            border-radius: $border-radius 0 0 $border-radius;
        }

        > :last-child,
        > :last-child > a,
        > :last-child > span {
            border-radius: 0 $border-radius $border-radius 0;
        }
    }

    [dir="rtl"] .nav-tertiary {
        > :first-child,
        > :first-child > a,
        > :first-child > span {
            border-radius: 0 $border-radius $border-radius 0;
        }

        > :last-child,
        > :last-child > a,
        > :last-child > span {
            border-radius: $border-radius 0 0 $border-radius;
        }
    }
}

/**
 * Indication of the currently active `.nav-tertiary` button.
 *
 * Example HTML:
 *
 * <p class="nav-tertiary">
 *     <a class="navlink-active">Page 1</a><a class="navlink">Page 2</a>
 * </p>
 */

.nav-tertiary .navlink-active,
.filtered button.ui-corner-right {
    @include gradient-linear($color-button-selected-gradient-from, $color-button-selected-gradient-to);

    border-color: $color-button-selected-border;

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

        border-color: darken($color-button-selected-border, 15%);
    }

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

        border-color: darken($color-button-selected-border, 15%);
    }

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

@include dark-mode {
    .nav-tertiary .navlink-active,
    .filtered button.ui-corner-right {
        &:focus {
            border-color: $dark-color-link-focus;
        }
    }
}

/**
 * Search widget 'search' button.
 *
 * 1. Correct specificity for RTL languages.
 *
 * Example HTML:
 *
 * <form class="txp-search">
 *     <input class="txp-search-input" type="search" size="24">
 *     <span class="txp-search-buttons">
 *         <button class="txp-search-button">Search</button>
 *         ...
 *     </span>
 * </form>
 */

.txp-search button.txp-search-button {
    padding-right: 1.5em;
    padding-left: 1.5em;

    @if $border-radius > 0 {
        border-radius: 0;

        [dir="rtl"] & {
            /* 1 */
            border-radius: 0;
        }
    }
}

/**
 * Disbaled button additional styling.
 */

button[disabled],
[type="button"][disabled],
[type="reset"][disabled],
[type="submit"][disabled],
.txp-button.disabled,
.navlink-disabled,
.ui-checkboxradio-disabled {
    background: $color-background-form-disabled !important;
    color: $color-text-button-disabled !important;
}

@include dark-mode {
    button[disabled],
    [type="button"][disabled],
    [type="reset"][disabled],
    [type="submit"][disabled],
    .txp-button.disabled,
    .navlink-disabled,
    .ui-checkboxradio-disabled {
        background: $color-background-form-disabled !important;
        color: $dark-color-text-button-disabled !important;
    }
}