@use "mixins";

.decorated-form-control {
  @include mixins.form-control-common;

  & {
    align-items: center;
    display: flex;
    padding: 0 0.5rem;
    width: 100%;
  }

  &:focus-within {
    @include mixins.form-control-focus;
  }

  &--read-only {
    @include mixins.form-control-readonly;
  }

  &--text {
    @include mixins.form-control-text;
  }

  &--error {
    @include mixins.form-control-error;
  }

  &--disabled {
    &#{&} {
      @include mixins.form-control-disabled;
    }
  }

  &__widget {
    flex-grow: 1;
  }
}