@use "sass:list";
@use "../utils/helpers" as h;
@use "../utils/variables" as vars;

/* @docs */
$field-spacer: h.useVar("control-spacer") !default;
$field-margin-bottom: calc(1.5 * $field-spacer) !default;

$field-label-color: h.useVar("font-color") !default;
$field-label-font-size: h.useVar("font-size") !default;
$field-label-font-weight: 600 !default;
$field-label-line-height: h.useVar("line-height") !default;

$field-message-spacer: calc(0.5 * $field-spacer) !default;
$field-message-color: h.useVar("secondary") !default;
$field-message-font-size: 0.75em !default;
$field-message-font-weight: h.useVar("font-weight") !default;
$field-message-line-height: h.useVar("line-height") !default;
/* @docs */

.o-field {
    @include h.defineVar("field-spacer", $field-spacer);
    @include h.defineVar("field-margin-bottom", $field-margin-bottom);
    @include h.defineVar("field-label-color", $field-label-color);
    @include h.defineVar("field-label-font-size", $field-label-font-size);
    @include h.defineVar("field-label-font-weight", $field-label-font-weight);
    @include h.defineVar("field-label-line-height", $field-label-line-height);
    @include h.defineVar("field-message-color", $field-message-color);
    @include h.defineVar("field-message-font-size", $field-message-font-size);
    @include h.defineVar(
        "field-message-font-weight",
        $field-message-font-weight
    );
    @include h.defineVar(
        "field-message-line-height",
        $field-message-line-height
    );
    @include h.defineVar("field-message-spacer", $field-message-spacer);

    &:not(:last-child) {
        margin-bottom: h.useVar("field-margin-bottom");
    }

    &__label {
        display: block;
        color: h.useVar("field-label-color");
        font-size: h.useVar("field-label-font-size");
        font-weight: h.useVar("field-label-font-weight");
        line-height: h.useVar("field-label-line-weight");

        // size variants
        @each $name, $value in vars.$sizes {
            &--#{$name} {
                @include h.defineVar(
                    "field-label-font-size",
                    h.useVar("size-#{$name}")
                );
            }
        }
    }

    &__message {
        display: block;
        color: h.useVar("field-message-color");
        font-size: h.useVar("field-message-font-size");
        font-weight: h.useVar("field-message-font-weight");
        line-height: h.useVar("field-message-line-height");

        margin-top: h.useVar("field-message-spacer");

        // color variants
        @each $name, $pair in vars.$colors {
            &--#{$name} {
                @include h.defineVar("field-message-color", h.useVar($name));
            }
        }
    }

    // color variants
    @each $name, $pair in vars.$colors {
        &--#{$name} {
            @include h.defineVar("field-message-color", h.useVar($name));
        }
    }

    &--addons {
        display: flex;
        justify-content: flex-start;

        > button:first-child,
        > *:first-child:not(:only-child) button,
        > input:first-child,
        > *:first-child:not(:only-child) input,
        > select:first-child,
        > *:first-child:not(:only-child) select {
            border-bottom-right-radius: 0;
            border-top-right-radius: 0;
        }

        > button:last-child,
        > *:last-child:not(:only-child) button,
        > input:last-child,
        > *:last-child:not(:only-child) input,
        > select:last-child,
        > *:last-child:not(:only-child) select {
            border-bottom-left-radius: 0;
            border-top-left-radius: 0;
        }

        > *:not(:first-child):not(:last-child) button,
        > button:not(:first-child):not(:last-child),
        > *:not(:first-child):not(:last-child) input,
        > input:not(:first-child):not(:last-child),
        > *:not(:first-child):not(:last-child) select,
        > select:not(:first-child):not(:last-child) {
            border-radius: 0;
        }
    }

    &--multiline,
    &--grouped {
        display: flex;
        gap: h.useVar("field-spacer");
    }

    &--multiline {
        flex-wrap: wrap;
    }

    &__horizontal-body {
        display: flex;
        flex-basis: 0;
        flex-grow: 5;
        flex-shrink: 1;

        & > .o-field:not(:last-child) {
            margin-inline-end: h.useVar("field-spacer");
        }
    }

    &--horizontal {
        display: flex;
    }

    &__horizontal-label {
        flex-basis: 0;
        flex-grow: 1;
        flex-shrink: 0;
        text-align: right;

        padding-right: h.useVar("field-spacer");
    }

    &--mobile {
        &.o-field--horizontal,
        .o-field__horizontal-label,
        .o-field__horizontal-body {
            display: block;
            text-align: inherit;
        }
    }
}