@mixin amplify-field-control {
  box-sizing: border-box;
  color: var(--amplify-components-fieldcontrol-color);
  font-size: var(--amplify-components-fieldcontrol-font-size);
  line-height: var(--amplify-components-fieldcontrol-line-height);
  padding-block-start: var(
    --amplify-components-fieldcontrol-padding-block-start
  );
  padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
  padding-inline-start: var(
    --amplify-components-fieldcontrol-padding-inline-start
  );
  padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
  transition: all var(--amplify-components-fieldcontrol-transition-duration);
  width: 100%;

  // for border
  border-color: var(--amplify-components-fieldcontrol-border-color);
  border-radius: var(--amplify-components-fieldcontrol-border-radius);
  border-style: var(--amplify-components-fieldcontrol-border-style);
  border-width: var(--amplify-components-fieldcontrol-border-width);

  // for focus styles
  outline-color: var(--amplify-components-fieldcontrol-outline-color);
  outline-style: var(--amplify-components-fieldcontrol-outline-style);
  outline-width: var(--amplify-components-fieldcontrol-outline-width);
  outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
  &:focus {
    border-color: var(--amplify-components-fieldcontrol-focus-border-color);
    box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
  }

  &--small {
    font-size: var(--amplify-components-fieldcontrol-small-font-size);
    padding-block-start: var(
      --amplify-components-fieldcontrol-small-padding-block-start
    );
    padding-block-end: var(
      --amplify-components-fieldcontrol-small-padding-block-end
    );
    padding-inline-start: var(
      --amplify-components-fieldcontrol-small-padding-inline-start
    );
    padding-inline-end: var(
      --amplify-components-fieldcontrol-small-padding-inline-end
    );
  }

  &--large {
    font-size: var(--amplify-components-fieldcontrol-large-font-size);
    padding-block-start: var(
      --amplify-components-fieldcontrol-large-padding-block-start
    );
    padding-block-end: var(
      --amplify-components-fieldcontrol-large-padding-block-end
    );
    padding-inline-start: var(
      --amplify-components-fieldcontrol-large-padding-inline-start
    );
    padding-inline-end: var(
      --amplify-components-fieldcontrol-large-padding-inline-end
    );
  }

  // Error styling
  &--error {
    border-color: var(--amplify-components-fieldcontrol-error-border-color);
    &:focus {
      border-color: var(--amplify-components-fieldcontrol-error-border-color);
      box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
    }
  }

  // for disabled styles
  &[disabled] {
    color: var(--amplify-components-fieldcontrol-disabled-color);
    cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
    border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
    background-color: var(
      --amplify-components-fieldcontrol-disabled-background-color
    );
  }

  // variation styles
  &--quiet {
    border-block-start: var(
      --amplify-components-fieldcontrol-quiet-border-block-start
    );
    border-inline-start: var(
      --amplify-components-fieldcontrol-quiet-border-inline-start
    );
    border-inline-end: var(
      --amplify-components-fieldcontrol-quiet-border-inline-end
    );
    border-radius: var(--amplify-components-fieldcontrol-quiet-border-radius);
    &:focus {
      border-block-end-color: var(
        --amplify-components-fieldcontrol-quiet-focus-border-block-end-color
      );
      box-shadow: var(--amplify-components-fieldcontrol-quiet-focus-box-shadow);
    }
    &[aria-invalid='true'] {
      border-block-end-color: var(
        --amplify-components-fieldcontrol-quiet-error-border-block-end-color
      );
      &:focus {
        box-shadow: var(
          --amplify-components-fieldcontrol-quiet-error-focus-box-shadow
        );
      }
    }
  }
}