/* Checkboxradio
   ========================================================================== */

/**
 * jQuery UI Checkboxradio.
 *
 * Some classes and HTML elements generally added via JavaScript, more info -
 * https://jqueryui.com/checkboxradio/
 *
 * Example HTML:
 *
 * <fieldset>
 *     <legend>Select a Location:</legend>
 *     <label for="radio-1">New York</label>
 *     <input id="radio-1" name="radio-1" type="radio">
 *     <label for="radio-2">Paris</label>
 *     <input id="radio-2" name="radio-1" type="radio">
 *     <label for="radio-3">London</label>
 *     <input id="radio-3" name="radio-1" type="radio">
 * </fieldset>
 */

.ui-checkboxradio-label {
    .ui-icon-background {
        box-sizing: border-box;
        border: 1px solid $color-border-extra-dark;
        border-radius: 0.2em;
        background-color: $color-background-box;
    }

    &:hover .ui-icon-background {
        border-color: shade($color-border-extra-dark, 15%);
    }

    &.ui-checkboxradio-checked {
        .ui-icon {
            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");
        }

        &.ui-state-focus .ui-icon {
            background-color: $color-link-focus;
        }
    }

    &.ui-checkboxradio-checked:hover .ui-icon {
        background-color: $color-text;
    }
}

.ui-checkboxradio-radio-label {
    .ui-icon-background {
        border-radius: 100%;
    }

    &.ui-checkboxradio-checked {
        .ui-icon {
            border: 5px solid $color-text-footnote;
            border-radius: 100%;
            background: $color-background-form;
        }

        &.ui-state-focus .ui-icon {
            border-color: $color-link-focus;
            background-color: $color-background-form;
        }
    }

    &.ui-checkboxradio-checked:hover .ui-icon {
        border-color: $color-text;
        background: $color-background-form;
    }
}

.ui-checkboxradio-disabled {
    pointer-events: none;
}

/**
 * Checkboxes as buttons - pressed state.
 *
 * Example HTML:
 *
 * <input class="ui-checkboxradio ui-helper-hidden-accessible" id="check" type="checkbox">
 * <label for="check" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-checked ui-state-active">Dogs</label>
 */

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

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

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

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

    &.ui-button: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%);
    }
}