/* Forms
   ========================================================================== */

/**
 * 1. Address width being affected by wide descendants in Chrome, Firefox.
 * 2. Define consistent fieldset border, margin, and padding.
 */

fieldset {
    min-width: 0; /* 1 */
    margin: 1em 0; /* 2 */
    padding: 1px 1em; /* 2 */
    border: 1px solid $color-border; /* 2 */
}

@include dark-mode {
    fieldset {
        border-color: $dark-color-border;
    }
}

/**
 * Normalize styling of `legend`.
 *
 * 1. Correct wrapping not present in IE 11 and Edge 12/13.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 * 3. Correct `color` not being inherited from fieldset in IE 11.
 */

legend {
    display: table; /* 1 */
    box-sizing: border-box; /* 1 */
    max-width: 100%; /* 1 */
    padding: 0; /* 2 */
    color: inherit; /* 3 */
    white-space: normal; /* 1 */
}

/**
 * Show the overflow in Edge.
 */

button,
input {
    overflow: visible;
}

/**
 * 1. Prevent elements from spilling out of their parent.
 * 2. Address margins set differently in Firefox 4+, Safari, and Chrome.
 * 3. Correct font properties not being inherited.
 */

button,
input,
optgroup,
select,
textarea,
.txp-button,
.txp-logout a,
.navlink,
.navlink-active,
.navlink-disabled {
    box-sizing: border-box;
    max-width: 100%; /* 1 */
    margin: 0; /* 2 */
    color: $color-text-form;
    font-family: inherit;
    font-size: 1rem; /* 3 */
    line-height: $base-line-height;
    vertical-align: baseline;
}

@include dark-mode {
    input,
    select,
    optgroup,
    textarea {
        color: $dark-color-text-form;
    }
}

/**
 * Styling of form input fields.
 *
 * 1. Remove browser-specific default styling.
 */

[type="color"],
[type="date"],
[type="datetime"],
[type="datetime-local"],
[type="email"],
[type="month"],
[type="number"],
[type="password"],
[type="search"],
[type="tel"],
[type="text"],
[type="time"],
[type="url"],
[type="week"],
select,
textarea {
    height: 2.307692307692308em; // 30px / 13px
    padding: 0.30769230769231em; // 4px / 13px
    border: 1px solid $color-border;
    border-radius: 0;
    background: $color-background-form;
    appearance: none; /* 1 */

    &:hover {
        border-color: $color-border-extra-dark;
    }

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

@include dark-mode {
    [type="color"],
    [type="date"],
    [type="datetime"],
    [type="datetime-local"],
    [type="email"],
    [type="month"],
    [type="number"],
    [type="password"],
    [type="search"],
    [type="tel"],
    [type="text"],
    [type="time"],
    [type="url"],
    [type="week"],
    select,
    textarea {
        border-color: $dark-color-border-extra-dark;
        background-color: $dark-color-background-form;

        &:hover {
            border-color: $dark-color-border-extra-light;
        }

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

/**
 * 1. Remove any excess padding.
 * 2. Correct margins for inline checkbox/radio labels.
 */

[type="checkbox"]:not(.ui-checkboxradio),
[type="radio"]:not(.ui-checkboxradio) {
    position: relative;
    bottom: -2px;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    padding: 0; /* 1 */
    border: 1px solid $color-border-extra-dark;
    background: $color-background-form;
    appearance: none;

    + label:not(.ui-controlgroup-item) {
        margin: 0 0.5em 0 0; /* 2 */

        &:last-of-type {
            margin: 0; /* 2 */
        }
    }

    &:hover {
        border-color: shade($color-border-extra-dark, 15%);
        cursor: pointer;
    }

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

    &:not([disabled]) + label:hover {
        cursor: pointer;
    }
}

@include dark-mode {
    [type="checkbox"]:not(.ui-checkboxradio),
    [type="radio"]:not(.ui-checkboxradio) {
        border-color: $dark-color-border-extra-dark;
        background-color: $dark-color-background-form;

        &:hover {
            border-color: $dark-color-border-extra-light;
        }

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

[type="checkbox"]:not(.ui-checkboxradio) {
    &:checked {
        border: 0;
        background: $color-text-footnote url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M13 2.5l-7 7-2-2-2 2 4 4L15 4.5z'/%3E%3C/svg%3E");

        &:hover,
        &:active {
            background-color: $color-text;
        }

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

    &[disabled]:checked {
        background: $color-text-footnote url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M13 2.5l-7 7-2-2-2 2 4 4L15 4.5z'/%3E%3C/svg%3E") !important;
    }
}

@include dark-mode {
    [type="checkbox"]:not(.ui-checkboxradio) {
        &:checked {
            background: $dark-color-text url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23282d32' d='M13 2.5l-7 7-2-2-2 2 4 4L15 4.5z'/%3E%3C/svg%3E");

            &:hover,
            &:active {
                background-color: $dark-color-text-heading;
            }

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

        &[disabled]:checked {
            background: $dark-color-text url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23282d32' d='M13 2.5l-7 7-2-2-2 2 4 4L15 4.5z'/%3E%3C/svg%3E") !important;
        }
    }
}

[type="radio"]:not(.ui-checkboxradio) {
    border-radius: 100%;

    &:checked {
        border: 5px solid $color-text-footnote;

        &:hover,
        &:active {
            border-color: $color-text;
        }

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

@include dark-mode {
    [type="radio"]:not(.ui-checkboxradio):checked {
        border-color: $dark-color-text;

        &:hover,
        &:active {
            border-color: $dark-color-text-heading;
        }

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

/**
 * Swap margin positions in RTL languages.
 */

[dir="rtl"] {
    [type="checkbox"],
    [type="radio"] {
        + label:not(.ui-controlgroup-item) {
            margin: 0 0 0 0.5em;

            &:last-of-type {
                margin: 0;
            }
        }
    }
}

/**
 * Styling for file inputs.
 */

[type="file"] {
    box-sizing: border-box;
    height: auto;
    min-height: 2.307692307692308em; // 30px / 13px
    padding: 0.30769230769231em; // 4px / 13px
    border: 1px solid $color-border;
    border-radius: 0;
    background: $color-background-form;
    appearance: none;
    cursor: pointer;

    &:hover {
        border-color: $color-border-extra-dark;
    }

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

@include dark-mode {
    [type="file"] {
        border-color: $dark-color-border-extra-dark;
        background-color: $dark-color-background-form;

        &:hover {
            border-color: $dark-color-border-extra-light;
        }

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

::-webkit-file-upload-button {
    @include gradient-linear($color-button-gradient-from, $color-button-gradient-to);

    padding: 0 0.25em;
    border: 0;
    color: $color-text-button;
    font: inherit;
    /* autoprefixer: off */
    appearance: none;
    cursor: pointer;
}

::-ms-browse {
    @include gradient-linear($color-button-gradient-from, $color-button-gradient-to);

    padding: 0 0.25em;
    border: 0;
    color: $color-text-button;
    font-family: inherit;
    font-size: 1rem;
    font-weight: normal;
    line-height: inherit;
    /* autoprefixer: off */
    appearance: none;
    cursor: pointer;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
    /* autoprefixer: off */
    appearance: none;
}

/**
 * Use indicator icon to signify the drop-down ability of `select`.
 */

select {
    padding-right: 1.30769230769231em; // 17px / 13px
    background: $color-background-form url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 4'%3E%3Cpolygon fill='%23333' points='3.5,4 0,0 7,0'/%3E%3C/svg%3E") right center no-repeat;
    background-size: 1em 0.30769230769231em;
    text-overflow: ellipsis;
    text-transform: none;
}

.txp-reduced-ui select {
    border-color: $color-background;
    background-color: $color-background;

    &:hover {
        border-color: $color-border-extra-dark;
    }

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

@include dark-mode {
    select {
        background-color: $dark-color-background-form;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 4'%3E%3Cpolygon fill='%23788591' points='3.5,4 0,0 7,0'/%3E%3C/svg%3E");
    }

    .txp-reduced-ui select {
        border-color: $dark-color-background;
        background-color: $dark-color-background;

        &:hover {
            border-color: $dark-color-border-extra-light;
        }

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

/**
 * Swap `select` icon position in RTL languages.
 */

[dir="rtl"] {
    select {
        padding-right: 0.30769230769231em; // 4px / 13px
        padding-left: 1.30769230769231em; // 17px / 13px
        background-position: 0.46153846153846em center; // 6px / 13px
    }
}

/**
 * Override height and background set in a previous rule and allow auto height.
 */

select[size],
select[multiple] {
    box-sizing: border-box;
    height: auto;
    padding-right: 0.30769230769231em; // 4px / 13px
    background-image: none;
    vertical-align: top;
}

@include dark-mode {
    select[size],
    select[multiple] {
        background-image: none;
    }
}

[dir="rtl"] {
    select[size],
    select[multiple] {
        padding-left: 0.30769230769231em; // 4px / 13px
    }
}

/**
 * Override height set in rule above and restrict to one line field.
 */

select[size="0"],
select[size="1"] {
    height: 2.307692307692308em; // 30px / 13px
}

/**
 * Remove browser-specific `select` UI in IE 11.
 */

select::-ms-expand {
    opacity: 0;
}

/**
 * Normalize styling of `optgroup`.
 */

optgroup {
    font-style: normal;
    font-weight: bold;
}

/**
 * 1. Remove default vertical scrollbar in IE 11.
 * 2. Remove unwanted space below `textarea` in Safari, Chrome, Opera.
 * 3. Restrict to vertical resizing to prevent layout breakage.
 */

textarea {
    width: 100%;
    height: auto;
    min-height: 3em;
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
    resize: vertical; /* 3 */
}

/**
 * Ensure code text areas are always rendered left-to-right.
 */

textarea.code {
    direction: ltr;
}

/**
 * Make sure disabled elements really are disabled and styled appropriately.
 *
 * 1. Re-set default cursor for disabled elements.
 */

[disabled],
[disabled] option,
[disabled] optgroup,
.txp-button.disabled,
.navlink-disabled,
.ui-checkboxradio-disabled {
    border: 1px solid $color-border !important;
    opacity: 0.33 !important;
    background-color: $color-background-form-disabled !important;
    box-shadow: none !important;
    cursor: default !important; /* 1 */
}

@include dark-mode {
    [disabled],
    [disabled] option,
    [disabled] optgroup,
    .txp-button.disabled,
    .navlink-disabled,
    .ui-checkboxradio-disabled {
        border: 1px solid $dark-color-border !important;
        opacity: 0.25 !important;
        background-color: $dark-color-background-form-disabled !important;
    }
}

/**
 * Width display options for `input` fields.
 *
 * Example HTML:
 *
 * <input size="32">
 * <input class="large">
 * <input class="medium">
 * <input class="small">
 * <input class="xsmall">
 */

input[size="32"] {
    width: 100%;
    max-width: 30em; // 390px / 13px
}

input.input-large {
    width: 100%;
}

input.input-medium {
    width: 50%;
    max-width: 14.46153846153846em; // 188px / 13px
}

input.input-small {
    width: 25%;
    max-width: 7.61538461538462em; // 99px / 13px
}

input.input-xsmall {
    width: 16%;
    max-width: 4.23076923076923em; // 55px / 13px
}

/**
 * Width display options for date and time `input` fields.
 *
 * Note: These are intentionally *not* using the HTML5 input type contexts.
 *
 * Example HTML:
 *
 * <div class="txp-form-field date posted">
 *     <div class="txp-form-field-label">
 *         <label>Publish date</label>
 *     </div>
 *     <div class="txp-form-field-value">
 *         <input class="input-year">
 *         <span role="separator">/</span>
 *         <input class="input-month">
 *         <span role="separator">/</span>
 *         <input class="input-day">
 *     </div>
 * </div>
 *
 * <div class="txp-form-field time posted">
 *     <div class="txp-form-field-label">
 *         <label>Publish time</label>
 *     </div>
 *     <div class="txp-form-field-value">
 *         <input class="input-hour">
 *         <span role="separator">:</span>
 *         <input class="input-minute">
 *         <span role="separator">:</span>
 *         <input class="input-second">
 *     </div>
 * </div>
 */

input {
    &.input-year {
        width: 4.07692307692308em; // 53px / 13px
        text-align: center;
    }

    &.input-month,
    &.input-day,
    &.input-hour,
    &.input-minute,
    &.input-second {
        width: 2.46153846153846em; // 32px / 13px
        text-align: center;
    }
}

/**
 * Styling for form field validation.
 */

input,
select,
textarea {
    &:focus:invalid {
        border-color: $color-error-text;
        box-shadow: none; // Normalize Firefox styling
    }
}

@include dark-mode {
    input,
    select,
    textarea {
        &:focus:invalid {
            border-color: $dark-color-error-text;
        }
    }
}

/**
 * Styling for Firefox-specfic form field validation.
 *
 * TODO: move to `:user-invalid` pseudo-class if/when has browser support.
 */

input,
select,
textarea {
    &:-moz-ui-invalid {
        border-color: $color-error-text;
        box-shadow: none;
    }

    &:hover:-moz-ui-invalid {
        border-color: shade($color-error-border, 30%);
    }
}

@include dark-mode {
    input,
    select,
    textarea {
        &:-moz-ui-invalid {
            border-color: $dark-color-error-text;
        }

        &:hover:-moz-ui-invalid {
            border-color: tint($dark-color-error-text, 30%);
        }
    }
}

/**
 * Normalize form placeholder style across browsers.
 *
 * 1. Fix placeholder font properties inheritance.
 */

::placeholder {
    opacity: 1;
    color: $color-text-form-placeholder;
    font: inherit; /* 1 */
    font-weight: normal;
}

@include dark-mode {
    ::placeholder {
        color: $dark-color-text-form-placeholder;
    }
}