.dropdownField {
  display: flex;
  height: var(--ktc-dimension-height-dropdown-field);
  padding: var(--ktc-dimension-padding-dropdown-field);
  align-items: center;
  gap: var(--ktc-dimension-gap-dropdown-field);
  border-radius: var(--ktc-border-radius-all-dropdown-field);
  border: 1px solid var(--ktc-color-border-dropdown-field-default, #d3d3d5);
  background: var(--ktc-color-background-dropdown-field-default, #fff);
  width: 100%;
  &:hover {
    border-color: var(--ktc-color-border-dropdown-field-hover);
    cursor: pointer;
  }

  &:active {
    border-color: var(--ktc-color-border-dropdown-field-active);
  }

  // &:focus {
  //   outline: none;
  //   box-shadow: var(--kts-box-shadow-item-focused);
  // }

  &__disabled {
    border-color: var(ktc-color-border-dropdown-field-disabled);
    background-color: var(--ktc-color-background-dropdown-field-disabled);
  }

  &__error {
    border-color: var(--ktc-color-border-dropdown-field-error);
  }

  &__expanded {
    border-color: var(--ktc-color-border-dropdown-field-active) !important;
  }
}

.label {
  width: 100%;
  text-align: left;
  font-family: var(
    --ktc-typography-component-dropdown-menu-item-label-font-family
  );
  font-size: var(--ktc-typography-component-dropdown-menu-item-label-font-size);
  font-weight: var(
    --ktc-typography-component-dropdown-menu-item-label-font-weight
  );

  letter-spacing: var(
    --ktc-typography-component-dropdown-menu-item-label-letter-spacing
  );
  line-height: var(
    --ktc-typography-component-dropdown-menu-item-label-line-height
  );

  // Todo: add typography token : var(ktc-typography-dropdown-text);

  &__keyword {
    color: var(--ktc-color-text-dropdown-text);
  }

  &__placeholder {
    color: var(--ktc-color-text-dropdown-helper);
  }
}