:root .component {
  --input-shadow: none;
  --input-shadow-focused: 0 0 0 3px rgba(255, 67, 57, 0.16);
  --input-border: 1px solid #e3e4e6;
  --input-border-focused: 1px solid #ff4339;
  --input-border-disabled: 1px solid #e3e4e6;
  --input-bg: #fff;
  --input-bg-disabled: #f8f8f9;
  --input-text: var(--theme-primary-color);
  --input-text-active: #13202b;
  --input-text-disabled: #717980;
}

[data-theme='dark'] .component {
  --input-bg-disabled: rgb(32, 37, 41);
  --input-border: 1px solid #43484d;
  --input-border-disabled: none;
  --input-text-active: #fff;
  --input-text-disabled: #939496;
}

.component {
  width: 100%;

  :global(.ant-input),
  &:global(.ant-input) {
    font: var(--font-p1);
    font-weight: 600;
    height: 48px;
    padding: 12px 16px;
    box-shadow: var(--input-shadow);
    border: var(--input-border);
    border-radius: 4px;
    background: var(--theme-input-background);
    color: var(--input-text);

    &:global(.ant-input-lg) {
      height: 64px;
      padding: 20px 24px;
    }

    &:focus {
      box-shadow: var(--input-shadow-focused);
      border: var(--input-border-focused);
      color: var(--input-text-active);
    }

    &::placeholder {
      color: var(--theme-input-placeholder);
    }

    &:global(.ant-input-disabled) {
      border: var(--input-border-disabled);
      background: var(--input-bg-disabled);

      &::placeholder {
        color: var(--input-text-disabled);
      }
    }

    /* Chrome, Safari, Edge, Opera */
    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
      appearance: none;
      margin: 0;
    }

    /* Firefox */
    &[type='number'] {
      appearance: textfield;
    }
  }

  :global(.ant-input-group) {
    border: var(--input-border);
    border-radius: 4px;

    :global(.ant-input-group-addon) {
      background: var(--theme-input-background);
      border: 0;

      &:first-of-type {
        border-right: var(--input-border);
      }
    }

    :global(.ant-input) {
      height: 50px;
      padding: 12px 16px;
      box-shadow: none;
      border: 0;
      border-radius: 0;

      &:global(.ant-input-lg) {
        height: 64px;
        padding: 20px 24px;
      }
    }

    &:focus-within {
      box-shadow: var(--input-shadow-focused);
      border: var(--input-border-focused);
    }
  }

  &.disabled {
    :global(.ant-input-group) {
      background: var(--input-bg-disabled);

      :global(.ant-input),
      :global(.ant-input-group-addon) {
        border: 0;
        background: var(--input-bg-disabled);
      }

      :global(.ant-input-group-addon) {
        &:first-of-type {
          border-right: var(--input-border-disabled);
        }
      }
    }
  }

  &:global(.ant-input-affix-wrapper) {
    background: var(--theme-input-background);
    border: var(--input-border);

    :global(.ant-input),
    :global(.ant-input):focus {
      border: 0;
    }
  }
}
