@mixin fieldset-name
{
    @include baseline-box(16px, steps(2.5), 0.5px, 0, steps(0.5));

    border-bottom: 1px solid $color-border-normal;
    margin-bottom: steps(2) - 1px;

    font-weight: normal;

    @include for-at-least-normal-tablets
    {
        margin-top: steps(1);
        margin-bottom: steps(3) - 1px;
    }
}

@mixin horizontal-field
{
    @include for-at-least-normal-tablets
    {
        display: flex;
        flex-wrap: wrap;

        .label,
        .group,
        .description,
        .error,
        .control.checkbox,
        .value,
        .actions
        {
            @include content-padding;
            @include half-column;
        }

        .label,
        .value
        {
            padding-top: 0;
            padding-bottom: 0;
        }

        .label
        {
            text-align: right;
            padding-right: steps(7);
        }

        .value,
        .joint,
        .actions
        {
            align-self: center;
        }

        .group
        {
            // compensate negative margins
            width: calc(50% + #{steps(2)});
        }

        // immediate child, not group control
        > .control:not(.checkbox)
        {
            // use margin so the gutter in not included in control width
            margin-left: $large-gutter;
            max-width: calc(50% - #{$gutter * 2});

            &.textarea
            {
                flex: 1;
            }
        }

        > .control.radio
        {
            flex: 1;
        }

        .description,
        .error,
        .control.checkbox,
        .actions
        {
            margin-left: 50%;
        }


        &.with-description .control
        {
            margin-right: -50%;
        }

        .description
        {
            width: auto;
            margin-left: 50%;
        }


        &.with-joint
        {
            margin-top: steps(-1);
            margin-bottom: steps(2);

            .label,
            .control
            {
                margin-top: steps(1);
                margin-bottom: steps(1);
            }
        }

        .joint
        {
            margin-right: calc(-50% - #{steps(0.5)});

            + .control
            {
                margin-left: calc(50% + #{$gutter});
            }
        }
    }
}

@mixin summary-field($horizontal: false)
{
    margin-bottom: steps(2);

    &:last-child
    {
        margin-bottom: 0;
    }

    .value
    {
        margin-top: steps(-1);
    }

    @if ($horizontal)
    {
        @include for-at-least-normal-tablets
        {
            .label
            {
                display: block;
                height: auto;
            }

            .value
            {
                align-self: auto;
                margin-top: 0;
            }
        }
    }
}

@mixin horizontal-summary-field
{
    @include summary-field($horizontal: true);
}

@mixin dropzone
{
    margin: 0 $gutter steps(3);

    text-align: center;

    &:last-child
    {
        margin-bottom: 0;
    }

    @include for-at-least-normal-tablets
    {
        margin: 0 ($gutter * 2) steps(4);

        position: relative;

        @include for-at-least-normal-tablets
        {
            padding: steps(7);

            background: $color-background-lighter;
        }

        &::before
        {
            content: "";

            position: absolute;
            top: steps(4);
            right: steps(4);
            bottom: steps(4);
            left: steps(4);

            border: 1px dashed $color-text-normal;

            pointer-events: none;
        }
    }

    .label
    {
        @include buttons;

        position: relative;

        color: $color-text-normal;
        font-weight: normal;

        @include for-at-most-small-tablets
        {
            padding: steps(3);

            background: $color-background-lighter;
        }

        &::before
        {
            content: svg-image-data-url("upload", $color-text-lighter);

            display: block;
            width: steps(6);
            height: steps(6);
            margin: steps(-2) auto steps(2);

            @include for-at-least-normal-tablets
            {
                margin-top: 0;
            }
        }
    }

    .control
    {
        .js &
        {
            @include visually-hidden;
        }
    }

    label.extra
    {
        &,
        html:not(.js) &
        {
            display: none;
        }

        @include for-at-least-normal-tablets
        {
            @include baseline-box(16px, steps(2.5), 0.5px);

            display: block;
            margin-top: steps(3);
        }
    }

    .values
    {
        display: flex;
        flex-wrap: wrap;

        margin: steps(-1) steps(-1) steps(1);

        @include for-at-least-normal-tablets
        {
            display: inline-flex;
            margin: steps(0);
        }
    }

    .value
    {
        position: relative;

        display: block;
        width: 50%;
        max-width: steps(26);
        max-height: steps(26);
        padding: steps(1);

        @include for-at-least-normal-tablets
        {
            width: steps(26);
            height: steps(26);
        }

        a
        {
            position: relative;

            overflow: hidden;
            display: block;
            height: 100%;

            cursor: zoom-in;

            &::before
            {
                content: "";

                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;

                background: linear-gradient(create-rgba($color-text-darker, 0), create-rgba($color-text-darker, 0.3));
            }

            &::after
            {
                content: svg-image-data-url("search", $color-background-lightest);

                position: absolute;
                top: 50%;
                left: 50%;

                overflow: hidden;
                width: steps(2);
                height: steps(2);
                padding: steps(1);
                border-radius: 50%;

                line-height: steps(2);
                background: $color-brand-normal;

                transform: translate(-50%, -50%);
            }

            &:hover::after
            {
                background-color: $color-brand-darker;
            }
        }

        button.remove
        {
            @include remove-icon;

            position: absolute;
            top: steps(2.5);
            right: steps(2.5);

            overflow: hidden;
            width: steps(4);
            height: steps(4);

            &::before
            {
                margin: 0 0 steps(1) 0;
            }

            @include for-at-most-small-tablets
            {
                top: steps(-0.5);
                right: steps(2);

                &:before
                {
                    content: svg-image-data-url("x", $color-text-inverted-lighter);

                    background-color: $color-border-darker;
                }
            }
        }
    }


    &.has-files
    {
        @include for-at-most-small-tablets
        {
            padding: 0;

            background: none;
        }

        .label
        {
            @include for-at-least-normal-tablets
            {
                display: inline-flex;
                margin: steps(1);

                vertical-align: middle;

                &::before
                {
                    content: none;
                }
            }
        }

        label.button
        {
            @include for-at-least-normal-tablets
            {
                @include antialiasing-reset;

                position: relative;

                display: flex;
                flex-direction: column;
                justify-content: flex-end;

                width: steps(24);
                height: steps(24);
                border: 1px solid $color-border-normal;

                color: inherit;
                background: none;

                &::after
                {
                    content: svg-image-data-url("add", $color-brand-normal);

                    position: absolute;
                    top: 50%;
                    left: 50%;

                    overflow: hidden;
                    width: steps(2);
                    height: steps(2);
                    padding: steps(1);
                    border: 1px solid $color-brand-normal;
                    border-radius: 50%;

                    line-height: steps(2);

                    transform: translate(-50%, -50%);
                }

                &:hover::after
                {
                    content: svg-image-data-url("add", $color-text-inverted-lighter);

                    border-color: $color-brand-darker;
                    background-color: $color-brand-darker;
                }
            }
        }

        label.extra
        {
            @include for-at-least-normal-tablets
            {
                margin-top: steps(2);
            }
        }

        &.readonly
        {
            @include for-at-least-normal-tablets
            {
                padding: steps(4);

                .values
                {
                    display: flex;
                    justify-content: center;

                    margin: steps(-1);
                }
            }

            &::before
            {
                content: none;
            }
        }
    }
}

@mixin placeholder
{
    $prefixes: ":-webkit-input" ":-moz";

    @each $prefix in $prefixes
    {
        &:#{$prefix}-placeholder
        {
            @content;
        }
    }
}

// adds outline on focus for customized inputs
@mixin focus-outline($pseudo-element: null)
{
    #{$keyboard-only-focus} + label#{$pseudo-element}
    {
        @include transition("outline");

        outline: thin dotted;
        outline: 5px auto -webkit-focus-ring-color; // webkit
    }
}

@mixin combobox($horizontal: false)
{
    position: relative;

    .control
    {
        @include input-icon("search", $color-text-lighter);

        &.loading
        {
            &::after
            {
                content: url("data:image/gif;base64,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");
            }

            button.clear
            {
                display: none;
            }
        }

        &[aria-expanded="true"]
        {
            &::after
            {
                z-index: 3; // cover input
            }

            input
            {
                position: relative;
                z-index: 3; // cover `ul.resultbox`
            }

            button.clear
            {
                z-index: 4; // cover input search icon
            }
        }
    }

    button.clear
    {
        position: absolute;
        z-index: 1; // cover input search icon
        top: 0;
        right: 0;

        padding: 15px 18px 15px 15px;

        html:not(.js) &
        {
            display: none;
        }

        &::after
        {
            content: svg-image-data-url('x', $color-text-lighter);

            display: block;
            width: steps(2);
            height: steps(2);

            background: $color-background-lightest;
        }

        &:hover,
        &:focus
        {
            &::after
            {
                content: svg-image-data-url('x', $color-text-darker);
            }
        }

        .text
        {
            @include visually-hidden;
        }
    }

    input:not(.has-value) + button.clear
    {
        display: none;
    }

    ul.resultbox
    {
        position: absolute;
        z-index: 2; // cover `button.clear` of other fields
        left: 0;
        right: 0;

        overflow-y: auto;
        width: 100%;
        max-width: steps(56);
        max-height: steps(7) * 5; // 5 list items
        border: 1px solid $color-border-normal;
        margin-top: -1px;

        text-align: left;
        background: $color-background-lightest;
        cursor: default;

        @if ($horizontal)
        {
            @include for-at-least-normal-tablets
            {
                left: 50%;

                width: auto;
                margin-top: steps(5) - 1px;
                margin-left: $large-gutter - 1px;
                margin-right: $gutter;
            }
        }

        .result
        {
            @include baseline-box(16px, steps(3), 0.7px, steps(2), steps(2));

            border-top: 1px solid $color-border-normal;
            margin: -1px steps(2) 0;

            color: $color-text-darker;

            @include for-at-least-normal-tablets
            {
                margin-left: steps(3);
                margin-right: steps(3);
            }

            &:hover,
            &.focused
            {
                position: relative;

                padding-left: steps(2);
                padding-right: steps(2);
                border-top: 0;
                margin: 0;

                background: $color-background-lighter;

                @include for-at-least-normal-tablets
                {
                    padding-left: steps(3);
                    padding-right: steps(3);
                }
            }
        }
    }
}

@mixin horizontal-combobox
{
    @include combobox($horizontal: true);
}
