/*------------------------------------*\
    TEXT INPUTS
    Covers text-based INPUT elements and TEXTAREA elements
\*------------------------------------*/

@use 'sass:list';
@use "../../base/helpers";
@use "../../base/settings";

.ds_input {
    @include helpers.ds_responsive-margin (3, bottom);
    @include helpers.ds_input;

    display: block;
    line-height: 2rem;
    width: 100%;

    & + &__message {
        margin-top: -1rem;
    }

    &__message--error {
        color: settings.$ds_colour__state--negative;
        font-weight: settings.$bold;
    }
}

// width variants: fixed
$text-input-fixed-widths: (2,3,4,5,10,20);

/// [1] padding + n character widths
/// [2] additional currency padding + right padding + n character widths
@each $width in $text-input-fixed-widths {
    .ds_input--fixed-#{$width} {
        max-width: calc(1rem + #{($width) * 1em}); /// [1]
    }

    .ds_currency-wrapper .ds_input--fixed-#{$width} {
        max-width: calc(3rem + #{($width) * 1em}); /// [2]
    }
}

// width variants: fluid
$text-input-fluid-widths: (
    'one-quarter' 25,
    'one-third' 33.333333,
    'half' 50,
    'two-thirds' 67.666667,
    'three-quarters' 75
);

@each $width in $text-input-fluid-widths {
    $name:  list.nth($width, 1);
    $value: list.nth($width, 2);

    .ds_input--fluid-#{$name} {
        max-width: #{($value) * 1%};
    }
}

.ds_input__wrapper {
    display: flex;
    margin-bottom: 1.5rem;

    .ds_input {
        float: left;
        margin-bottom: 0;
        margin-right: -3rem;
        padding-right: 3.5rem;
    }

    .ds_icon {
        height: 2rem;
        padding: 0.5rem;
        width: 2rem;
    }

    > .ds_button {
        margin: 0;
        @include helpers.ds_button-sizing--small;
    }
}