.tbxforms-radios__item {
    @include tbxforms-font($size: 'default');

    display: block;
    position: relative;

    min-height: $tbxforms-radios-size;

    margin-bottom: $tbxforms-spacer;
    padding-left: $tbxforms-radios-size;

    clear: left;
}

.tbxforms-radios__item:last-child,
.tbxforms-radios__item:last-of-type {
    margin-bottom: 0;
}

.tbxforms-radios__input {
    $input-offset: ($tbxforms-touch-target-size - $tbxforms-radios-size) / 2;

    cursor: pointer;

    position: absolute;

    z-index: 1;
    top: $input-offset * -1;
    left: $input-offset * -1;

    width: $tbxforms-touch-target-size;
    height: $tbxforms-touch-target-size;
    margin: 0;

    opacity: 0;
}

.tbxforms-label.tbxforms-radios__label {
    display: inline-block;
    margin-bottom: 0;
    padding: 8px $tbxforms-radios-label-padding-left-right
        $tbxforms-in-field-spacer;
    cursor: pointer;
    // remove 300ms pause on mobile
    touch-action: manipulation;
}

// ( ) Radio ring
.tbxforms-label.tbxforms-radios__label::before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;

    width: $tbxforms-radios-size;
    height: $tbxforms-radios-size;

    border: $tbxforms-border-width-form-element solid currentColor;
    border-radius: 50%;
    background: transparent;
}

//  •  Radio button
//
// We create the 'button' entirely out of 'border' so that they remain
// 'filled' even when colours are overridden in the browser.
.tbxforms-label.tbxforms-radios__label::after {
    content: '';

    position: absolute;
    top: $tbxforms-in-field-spacer;
    left: $tbxforms-in-field-spacer;

    width: 0;
    height: 0;

    border: $tbxforms-in-field-spacer solid currentColor;
    border-radius: 50%;
    opacity: 0;
    background: currentColor;
}

.tbxforms-hint.tbxforms-radios__hint {
    display: block;
    padding-right: $tbxforms-radios-label-padding-left-right;
    padding-left: $tbxforms-radios-label-padding-left-right;
    margin-bottom: 0;
}

// Focused state
.tbxforms-radios__input:focus + .tbxforms-label.tbxforms-radios__label::before {
    border-width: $tbxforms-focus-width;
    box-shadow: 0 0 0 $tbxforms-radios-focus-width $tbxforms-focus-colour;
}

// Selected state
.tbxforms-radios__input:checked
    + .tbxforms-label.tbxforms-radios__label::after {
    opacity: 1;
}

// Disabled state
.tbxforms-radios__input:disabled,
.tbxforms-radios__input:disabled + .tbxforms-label.tbxforms-radios__label {
    cursor: default;
}

.tbxforms-radios__input:disabled + .tbxforms-label.tbxforms-radios__label {
    opacity: 0.5;
}

// =========================================================
// Inline radios
// =========================================================

.tbxforms-radios--inline {
    @media only screen and (min-width: 641px) {
        @include tbxforms-clearfix();

        .tbxforms-radios__item {
            margin-right: tbxforms-spacing(4);
            float: left;
            clear: none;
        }
    }
}

// =========================================================
// Dividers ('or')
// =========================================================

.tbxforms-radios__divider {
    $tbxforms-divider-size: $tbxforms-radios-size !default;
    @include tbxforms-font($size: 'default');
    @include tbxforms-text-colour();
    width: $tbxforms-divider-size;
    margin-bottom: $tbxforms-in-field-spacer;
    text-align: center;
}

// =========================================================
// Small checkboxes
// =========================================================

.tbxforms-radios--small {
    $input-offset: ($tbxforms-touch-target-size - $tbxforms-small-radios-size) /
        2;
    $label-offset: $tbxforms-touch-target-size - $input-offset;

    .tbxforms-radios__item {
        @include tbxforms-clearfix();
        min-height: 0;
        margin-bottom: 0;
        padding-left: $label-offset;
        float: left;
    }

    // Shift the touch target into the left margin so that the visible edge of
    // the control is aligned
    //
    //   ┆Which colour is your favourite?
    //  ┌┆───┐
    //  │┆() │ Purple
    //  └┆▲──┘
    //  ▲┆└─ Radio pseudo element, aligned with margin
    //  └─── Touch target (invisible input), shifted into the margin
    .tbxforms-radios__input {
        left: $input-offset * -1;
    }

    // Adjust the size and position of the label.
    //
    // Unlike larger radios, we also have to float the label in order to
    // 'shrink' it, preventing the hover state from kicking in across the full
    // width of the parent element.
    .tbxforms-label.tbxforms-radios__label {
        margin-top: -2px;
        padding: 13px $tbxforms-in-field-spacer 13px 1px;
        float: left;

        @media only screen and (min-width: 641px) {
            padding: 11px tbxforms-spacing(3) 10px 1px;
        }
    }

    // ( ) Radio ring
    //
    // Reduce the size of the control [1], vertically centering it within the
    // touch target [2]
    .tbxforms-label.tbxforms-radios__label::before {
        top: $input-offset - $tbxforms-border-width-form-element; // 2
        width: $tbxforms-small-radios-size; // 1
        height: $tbxforms-small-radios-size; // 1
    }

    //  •  Radio button
    //
    // Reduce the size of the 'button' and center it within the ring
    .tbxforms-label.tbxforms-radios__label::after {
        top: 15px;
        left: 7px;
        border-width: 5px;
    }

    // Fix position of hint with small radios
    //
    // Do not use hints with small radios – because they're within the input
    // wrapper they trigger the hover state, but clicking them doesn't actually
    // activate the control.
    //
    // (If you do use them, they won't look completely broken... but seriously,
    // don't use them)
    .tbxforms-hint.tbxforms-radios__hint {
        padding: 0;
        clear: both;
        pointer-events: none;
    }

    .tbxforms-radios__divider {
        width: $tbxforms-small-radios-size;
        margin-bottom: $tbxforms-in-field-spacer;
    }

    // Hover state for small radios.
    //
    // We use a hover state for small radios because the touch target size
    // is so much larger than their visible size, and so we need to provide
    // feedback to the user as to which radio they will select when their
    // cursor is outside of the visible area.
    .tbxforms-radios__item:hover
        .tbxforms-radios__input:not(:disabled)
        + .tbxforms-label.tbxforms-radios__label::before {
        box-shadow: 0 0 0 $tbxforms-hover-width $tbxforms-hover-colour;
    }

    // Because we've overridden the border-shadow provided by the focus state,
    // we need to redefine that too.
    //
    // We use two box shadows, one that restores the original focus state [1]
    // and another that then applies the hover state [2].
    .tbxforms-radios__item:hover
        .tbxforms-radios__input:focus
        + .tbxforms-label.tbxforms-radios__label::before {
        box-shadow: (
            0 0 0 $tbxforms-radios-focus-width $tbxforms-focus-colour,
            0 0 0 $tbxforms-hover-width $tbxforms-hover-colour
        );
    }

    // For devices that explicitly don't support hover, don't provide a hover
    // state (e.g. on touch devices like iOS).
    //
    // We can't use `@media (hover: hover)` because we wouldn't get the hover
    // state in browsers that don't support `@media (hover)` (like Internet
    // Explorer) – so we have to 'undo' the hover state instead.
    @media (hover: none), (pointer: coarse) {
        .tbxforms-radios__item:hover
            .tbxforms-radios__input:not(:disabled)
            + .tbxforms-label.tbxforms-radios__label::before {
            box-shadow: initial;
        }

        .tbxforms-radios__item:hover
            .tbxforms-radios__input:focus
            + .tbxforms-label.tbxforms-radios__label::before {
            box-shadow: 0 0 0 $tbxforms-radios-focus-width
                $tbxforms-focus-colour;
        }
    }
}
