/*------------------------------------*\
    FORM MIXINS
\*------------------------------------*/

@use "../focus";
@use "../media-query";
@use "../../settings";

$small-focus-border-colour: settings.$ds_colour__border !default;

@mixin ds_input {
    background-color: settings.$ds_colour__background--primary;
    border: settings.$field-border-width solid currentColor;
    border-radius: 0;
    min-height: settings.$input-min-height;
    padding: (0.5rem - settings.$field-border-width) (0.75rem - settings.$field-border-width);

    &:focus {
        @include focus.ds_input-focus;
    }

    &--error {
        border-color: settings.$ds_colour__state--negative;
        border-width: settings.$field-border-width--error;
        padding: (0.5rem - settings.$field-border-width--error) (0.75rem - settings.$field-border-width--error);

        &:focus {
            border-color: currentColor;
            box-shadow: none;
        }
    }
}

@mixin ds_radiocheckboxstates ($round: false, $small-pip-padding: 0.125rem, $active-shadow-colour: settings.$ds_colour__input--focus__background) {

    margin-bottom: 1.5rem;
    padding-left: 2.5rem;
    position: relative;

    &__input {
        height: 2.5rem;
        left: 0;
        opacity: 0;
        position: absolute;
        top: 0;
        width: 2.5rem;
    }

    &__label {
        display: inline-block;
        padding: 0.25rem 2rem 0.25rem 1rem;
    }

    &--small &__label,
    &--small .ds_question__sub {
        padding-left: 0.5rem;
    }

    &__label::before {
        background-color: settings.$ds_colour__background--primary;
        border: settings.$field-border-width solid settings.$ds_colour__text;
        content: '';
        height: settings.$input-size;
        left: 0;
        position: absolute;
        width: settings.$input-size;
    }

    &__label::after {
        content: "";
        position: absolute;
        bottom: calc(100% - #{settings.$input-size});
        left: 0;
        right: calc(100% - #{settings.$input-size});
        opacity: 0;
    }

    &__label::before,
    &__label::after {
        top: -0.25rem;

        @include media-query.ds_media-query(medium) {
            top: 0;
        }

        @if $round {
            border-radius: 50%;
        }

    }

    /// focus
    &__input:focus + &__label::before {
        background-color: settings.$ds_colour__link--focus__background;
        border-color: settings.$ds_colour__link--focus;
        border-width: settings.$field-border-width--focus;
        box-shadow: 0 0 0 settings.$field-glow-width settings.$ds_colour__input--focus__outline;

        @include media-query.ds_media-query-high-contrast {
            outline: 0.25rem solid highlight;
            outline-offset: -0.25rem;
        }
    }

    &__input:checked + &__label::after {
        opacity: 1;
    }

    /// [1] this negative margin makes the small checkboxes/radios align left with content
    &--small {
        margin-bottom: 1rem;
        margin-left: -0.5rem; /// [1]
    }

    &--small &__input {
        height: 1.5rem;
        left: 0.5rem;
        top: 0.5rem;
        width: 1.5rem;
    }

    &--small &__label::before {
        height: 1.5rem;
        left: 0.5rem;
        top: 0.25rem;
        width: 1.5rem;

        @include media-query.ds_media-query(medium) {
            top: 0.5rem;
        }
    }

    > .ds_hint-text {
        padding-left: 1rem;
    }
}




/// legacy non-prefixed names
/// DEPRECATED - use prefixed mixin instead
@mixin radiocheckboxstates($round: false, $small-pip-padding: 0.125rem, $active-shadow-colour: settings.$ds_colour__input--focus__background) {
    @include ds_radiocheckboxstates($round, $small-pip-padding, $active-shadow-colour);
}