.Sui-Field {
    --sui-input-height: theme('sui.control.normal.height');
    --sui-input-px: theme('sui.control.normal.px');
    --sui-input-py: theme('sui.control.normal.py');
    --sui-input-border: theme('colors.sui.border');
    --sui-input-border-dark: theme('colors.sui.borderDark');
    --sui-input-bg: theme('colors.sui.bg');
    --sui-input-text: theme('colors.sui.text');
    --sui-input-placeholder: theme('colors.sui.placeholder');
    --sui-input-radius: theme('sui.radius.control');
    --sui-input-margin: 0;
    --sui-label-color: inherit;
    --sui-helper-color: theme('colors.sui.text');
    --sui-icon-size: 1rem;
    @apply inline-block my-[var(--sui-input-margin)];
    &__Label {
        @apply block w-full mb-1 leading-none text-[color:var(--sui-label-color)];
    }
    &__Input {
        @apply appearance-none relative block w-auto text-base caret-primary selection:bg-primary-200 sm:text-sm transition-all ease-out duration-200
        disabled:opacity-50 disabled:cursor-not-allowed
        rounded-[var(--sui-input-radius)]
        text-[color:var(--sui-input-text)]
        h-[var(--sui-input-height)] px-[var(--sui-input-px)] py-[var(--sui-input-py)]
        border border-[color:var(--sui-input-border)]
        bg-[color:var(--sui-input-bg)]
        placeholder-[color:var(--sui-input-placeholder)]
        outline-none focus:outline-none
        ring-0 ring-offset-0 ring-inset ring-[color:var(--sui-input-border-dark)]
        focus:border-[color:var(--sui-input-border-dark)] focus:ring-1 focus:ring-inset focus:ring-[color:var(--sui-input-border-dark)];
    }
    &__InputGroup {
        @apply flex w-full items-start ring-0 ring-transparent relative;
        .Sui-Field__Input{
            @apply flex-auto;
        }
        >*:first-child:not(:last-child){
            @apply rounded-r-none;
            .Sui-ButtonBase,
            .Sui-Field__InputWrapper,
            .Sui-Field__InputGroup,
            .Sui-Field__Input{
                @apply rounded-r-none;
            }
        }
        >*:last-child:not(:first-child){
            @apply rounded-l-none;
            .Sui-ButtonBase,
            .Sui-Field__InputWrapper,
            .Sui-Field__InputGroup,
            .Sui-Field__Input{
                @apply rounded-l-none;
            }
        }
        >*:not(:last-child):not(:first-child){
            @apply rounded-none;
            .Sui-ButtonBase,
            .Sui-Field__InputWrapper,
            .Sui-Field__InputGroup,
            .Sui-Field__Input{
                @apply rounded-none;
            }
        }
    }

    &__StartAction, &__EndAction{
        @apply shrink-0;
        /*.Sui-Field__InputWrapper,
        .Sui-Field__InputGroup,
        .Sui-Field__Input {
            --sui-input-height: var(--sui-input-height);
            --sui-input-px: var(--sui-input-px);
            --sui-input-py: var(--sui-input-py);
        }*/
    }


    &__InputAdornment {
        @apply inline-flex items-center
        first:rounded-l-[var(--sui-input-radius)] last:rounded-r-[var(--sui-input-radius)]
        text-[color:var(--sui-input-text)]
        h-[var(--sui-input-height)] first:pl-[var(--sui-input-px)] last:pr-[var(--sui-input-px)];
        /*border-x-0 border-y first:border-l last:border-r border-[color:var(--sui-input-border)];*/
        .Sui-IconButton{
            --sui-btn-height: calc(var(--sui-input-height) - 4px)
        }
        &:first-child .Sui-IconButton{
            margin-left: calc(-1 * var(--sui-input-px) + 2px);
        }
        &:last-child .Sui-IconButton{
            margin-right: calc(-1 * var(--sui-input-px) + 2px);
        }
        .Sui-Icon{
            @apply w-[var(--sui-icon-size)] h-[var(--sui-icon-size)];
        }
    }
    &__InputWrapper{
        @apply flex flex-nowrap transition ease-out duration-200 flex-1 max-w-full
        rounded-[var(--sui-input-radius)]
        h-[var(--sui-input-height)]
        text-[color:var(--sui-input-text)]
        border border-[color:var(--sui-input-border)]
        bg-[color:var(--sui-input-bg)]
        ring-0 ring-inset ring-[color:var(--sui-input-border-dark)];

        > .Sui-Field__Input {
            @apply border-0 ring-0 bg-transparent;
        }
    }
    &__HelperText {
        @apply flex flex-nowrap text-xs font-medium leading-none mt-1 text-[color:var(--sui-helper-color)];
    }

    &.is-focused{
        >.Sui-Field__InputGroup>.Sui-Field__InputWrapper {
            @apply border-[color:var(--sui-input-border-dark)] ring-1
        }
    }

    /**
       SIZES
        */
    &--slim{
        --sui-input-height: theme('sui.control.slim.height');
        --sui-input-px: theme('sui.control.slim.px');
        --sui-input-py: theme('sui.control.slim.py');
        --sui-icon-size: 0.875rem;
        .Sui-Field__Input {
            @apply sm:text-sm;
        }
    }
    &--normal{
        --sui-input-height: theme('sui.control.normal.height');
        --sui-input-px: theme('sui.control.normal.px');
        --sui-input-py: theme('sui.control.normal.py');
        --sui-icon-size: 1rem;
        .Sui-Field__Input {
            @apply sm:text-sm;
        }
    }
    &--large{
        --sui-input-height: theme('sui.control.large.height');
        --sui-input-px: theme('sui.control.large.px');
        --sui-input-py: theme('sui.control.large.py');
        --sui-icon-size: 1.375rem;
        .Sui-Field__Input {

            @apply sm:text-sm;
        }
        /*.Sui-Field__StartAction,
        .Sui-Field__EndAction {
            .Sui-Field__InputWrapper,
            .Sui-Field__InputGroup,
            .Sui-Field__Input
            {
                --sui-input-height: theme('sui.control.large.height');
                --sui-input-px: theme('sui.control.large.px');
                --sui-input-py: theme('sui.control.large.py');
                --sui-btn-height: theme('sui.control.large.height');
                --sui-btn-px: theme('sui.control.large.px');
                --sui-btn-py: theme('sui.control.large.py');
            }
        }*/
    }

    &--filled{
        --sui-input-bg: theme('colors.sui.bgDim');
        --sui-input-border: theme('colors.sui.bgDim');
    }

    /**
    COLORS
    */
    &--primary{
        --sui-input-border: theme('colors.primary.500');
        --sui-input-border-dark: theme('colors.primary.500');
    }
    &--secondary{
        --sui-input-border: theme('colors.secondary.500');
        --sui-input-border-dark: theme('colors.secondary.500');
    }
    &--warning{
        --sui-input-border: theme('colors.warning.500');
        --sui-input-border-dark: theme('colors.warning.500');
    }
    &--info{
        --sui-input-border: theme('colors.info.500');
        --sui-input-border-dark: theme('colors.info.500');
    }
    &--error{
        --sui-input-border: theme('colors.error.500');
        --sui-input-border-dark: theme('colors.error.500');
    }
    &--success{
        --sui-input-border: theme('colors.success.500');
        --sui-input-border-dark: theme('colors.success.500');
    }
    &--hasError{
        //--sui-label-color: theme('colors.error.500');
        --sui-helper-color: theme('colors.error.500');
    }
    &--hasSuccess{
        //--sui-label-color: theme('colors.success.500');
        --sui-helper-color: theme('colors.success.500');
    }

    &--light{
        --sui-input-bg: theme('colors.light.50');
        --sui-input-border: theme('colors.light.500');
        --sui-input-border-dark: theme('colors.light.500');
        --sui-input-placeholder: theme('colors.light.300');
        --sui-input-text: theme('colors.light.500');
        --sui-label-color: theme('colors.light.500');
        --sui-helper-color: theme('colors.light.500');
        &.Sui-Field--filled{
            --sui-input-bg: theme('colors.light.500');
            --sui-input-border: theme('colors.light.50');
            --sui-input-border-dark: theme('colors.light.100');
            --sui-input-text: theme('colors.sui.text');
            --sui-input-placeholder: theme('colors.sui.placeholder');
            --sui-label-color: theme('colors.light.500');
        }
        .Sui-Field__Input{
            @apply caret-[var(--sui-input-text)];
        }
    }

    /* ROUNDED */
    &--rounded{
        --sui-input-radius: theme('sui.radius.control');
    }
    &--pill{
        --sui-input-radius: theme('sui.radius.full');
    }
    &--square{
        --sui-input-radius: 0;
    }

    /* FULL WIDTH */
    &--fullWidth{
        @apply w-full;
        .Sui-Field__Input{
            @apply w-full;
        }
    }

    /* Margin */
    &--marginNormal{
        --sui-input-margin: theme('sui.spacing.control.margin');
    }
    &--marginDense{
        --sui-input-margin: theme('sui.spacing.control.marginDense');
    }
    &--marginNone{
        --sui-input-margin: 0;
    }

    /* FLOATING */
    &--floating{
        @apply relative;
        .Sui-Field__Label{
            @apply translate-y-[200%] opacity-0 mb-0.5 leading-none text-xs transition ease-out duration-300
        }
        .Sui-Field__Input{
            @apply w-full;
        }
        &.is-filled, &.is-focused{
            .Sui-Field__Label{
                @apply translate-y-0 opacity-100;
            }
        }
    }
}