/* @docs */
$field-label-color: #363636 !default;
$field-label-font-weight: 600 !default;
$field-margin-bottom: .75rem !default;
$field-message-font-size: .75rem !default;
$field-message-margin-top: .25rem !default;
$field-margin-right: .37rem !default;
$field-horizontal-label-margin: 0 1.5rem 0 0 !default;
/* @docs */

.o-field {
    flex-grow: 1;
    &:not(:last-child) {
        @include avariable('margin-bottom', 'field-margin-bottom', $field-margin-bottom);
    }
    &__label {
        display: block;
        @include avariable('color', 'field-label-color', $field-label-color);
        @include avariable('font-size', 'base-font-size', $base-font-size);
        @include avariable('font-weight', 'field-label-font-weight', $field-label-font-weight);
        @each $name, $value in $sizes {
            &-#{$name} {
                @include avariable('font-size', ('field-font-size-' + #{$name}), $value);
            }
        }
    }
    &__message {
        display: block;
        @include avariable('font-size', 'field-message-font-size', $field-message-font-size);
        @include avariable('margin-top', 'field-message-margin-top', $field-message-margin-top);
        @each $name, $pair in $colors {
            $color: nth($pair, 1);
            &-#{$name} {
                @include avariable('color', ('variant-' + #{$name}), $color);
            }
        }
    }
    &--addons {
        display: flex;
        justify-content: flex-start;
        > *:first-child:not(:only-child) button,
        > button:first-child,
        > *:first-child:not(:only-child) input,
        > input:first-child,
        > *:first-child:not(:only-child) select,
        > select:first-child {
            border-bottom-right-radius: 0;
            border-top-right-radius: 0;
        }
        > *:last-child:not(:only-child) button,
        > button:last-child,
        > *:last-child:not(:only-child) input,
        > input:last-child,
        > *:last-child:not(:only-child) select,
        > select:last-child {
            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;
        }
    }
    &--grouped {
        display: flex;
        @include side-flex-gap($field-margin-right);
    }
    &--grouped-multiline {
        flex-wrap: wrap;
        &:last-child {
            @include avariable('margin-bottom', 'field-margin-bottom', -$field-margin-bottom);
        }
    }
    &__horizontal-body {
        display: flex;
        flex-basis: 0;
        flex-grow: 5;
        flex-shrink: 1;
        @include side-flex-gap($field-margin-right);
    }
    &--horizontal {
        display: flex;
    }
    &__horizontal-label {
        flex-basis: 0;
        flex-grow: 1;
        flex-shrink: 0;
        margin: $field-horizontal-label-margin;
        text-align: right;
    }
    &--mobile {
        .o-field__horizontal-body {
            all: unset;
        }
        &.o-field--horizontal {
            all: unset;
        }
        .o-field__horizontal-label {
            all: unset;
        }
    }
}