/* Container styles */
.currency_field_container {
  margin: .5rem;
  min-height: 0;
}

.currency-field-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-family, system-ui, -apple-system, sans-serif); /* Use variable for font-family */
}

/* Label styles */
.currency-field-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.currency-field-label-text {
  font-size: var(--font-size-sm, .875rem); /* Use variable for font size */
  font-weight: 500;
  color: var(--color-gray-700, #374151); /* Use variable for color */
}

.currency-field-required {
  color: var(--color-red-600, #dc2626); /* Use variable for color */
  margin-left: 2px;
}

/* Wrapper styles */
.currency-field-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
  transition: var(--transition-default, all .2s ease); /* Use variable for transition */
}

.currency-field-wrapper.focused {
  box-shadow: 0 0 0 2px var(--color-blue-400, #3b82f680); /* Use variable for shadow color */
  border-radius: var(--border-radius-md, 6px); /* Use variable for border radius */
}

/* Symbol styles */
.currency-field-symbol {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-gray-500, #6b7280); /* Use variable for color */
  pointer-events: none;
}

/* Field styles */
.currency_field,
.currency-field {
  width: 100%;
  padding: var(--padding-sm, 8px 12px 8px 28px); /* Use variable for padding */
  border: 1px solid var(--color-gray-300, #d1d5db); /* Use variable for border color */
  border-radius: var(--border-radius-md, 6px); /* Use variable for border radius */
  font-size: var(--font-size-sm, .875rem); /* Use variable for font size */
  line-height: var(--line-height-sm, 1.25rem); /* Use variable for line height */
  color: var(--color-gray-900, #111827); /* Use variable for text color */
  background-color: var(--color-white, #fff); /* Use variable for background color */
  transition: var(--transition-default, all .2s ease); /* Use variable for transition */
}

.currency-field:hover:not(.disabled) {
  border-color: var(--color-gray-400, #9ca3af); /* Use variable for hover border color */
}

.currency-field:focus {
  outline: none;
  border-color: var(--color-blue-500, #3b82f6); /* Use variable for focus border color */
}

.currency-field.error {
  border-color: var(--color-red-600, #dc2626); /* Use variable for error border color */
}

.currency-field.disabled {
  background-color: var(--color-gray-100, #f3f4f6); /* Use variable for disabled background color */
  color: var(--color-gray-500, #6b7280); /* Use variable for disabled text color */
  cursor: not-allowed;
}

/* Error styles */
.currency-field-error {
  font-size: var(--font-size-xs, .75rem); /* Use variable for font size */
  color: var(--color-red-600, #dc2626); /* Use variable for error text color */
  min-height: 1rem;
}

.currency-field-error-placeholder {
  min-height: 1rem;
}

/* Size variants */
.currency-field-sm .currency-field {
  padding: var(--padding-xs, 6px 12px 6px 24px); /* Use variable for padding */
  font-size: var(--font-size-xs, .75rem); /* Use variable for font size */
}

.currency-field-sm .currency-field-symbol {
  left: 10px;
  font-size: var(--font-size-xs, .75rem); /* Use variable for font size */
}

.currency-field-lg .currency-field {
  padding: var(--padding-lg, 10px 16px 10px 32px); /* Use variable for padding */
  font-size: var(--font-size-md, 1rem); /* Use variable for font size */
}

.currency-field-lg .currency-field-symbol {
  left: 14px;
  font-size: var(--font-size-md, 1rem); /* Use variable for font size */
}