hanko-auth,
hanko-profile {
  /* Color Scheme */
  --color: #333333;
  --color-shade-1: #8f9095;
  --color-shade-2: #e5e6ef;

  --brand-color: #FF7100;
  --brand-color-shade-1: #CC5102;
  --brand-contrast-color: white;

  --background-color: white;
  --error-color: #e82020;
  --link-color: #FF7100;

  /* Font Styles */
  --font-weight: 600;
  --font-size: .875rem;
  --font-family: Open Sauce Sans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  /* Border Styles */
  --border-radius: 8px;
  --border-style: solid;
  --border-width: 1px;

  /* Item Styles */
  --item-height: 1.5;
  --item-margin: 0.5rem 0;

  /* Container Styles */
  --container-padding: 30px;
  --container-max-width: 410px;

  /* Headline Styles */
  --headline1-font-size: 24px;
  --headline1-font-weight: 600;
  --headline1-margin: 0 0 1rem;

  --headline2-font-size: 16px;
  --headline2-font-weight: 600;
  --headline2-margin: 1rem 0 0.5rem;

  /* Divider Styles */
  --divider-padding: 0 42px;
  --divider-visibility: visible;

  /* Link Styles */
  --link-text-decoration: none;
  --link-text-decoration-hover: underline;

  /* Input Styles */
  --input-min-width: 14em;

  /* Button Styles */
  --button-min-width: max-content;
}

.hankoComponent::part(button) {
  /* Force the input fields and buttons are on top of each other */
  padding-top: .75rem;
  padding-bottom: .75rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  border-radius: 9999px;
}

.hankoComponent::part(input) {
  /* Force the input fields and buttons are on top of each other */
  transition-duration: .2s;
  padding: 1rem;
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: rgba(228, 228, 228, var(--tw-border-opacity));
  border-radius: 9999px;
}