:host {
  /* dimensions */
  --ez-combo-box--height: 42px;
  --ez-combo-box--width: 100%;

  /* general */
  --ez-combo-box--border-radius: var(--border--radius-medium, 12px);
  --ez-combo-box--font-size: var(--text--medium, 14px);
  --ez-combo-box--font-family: var(--font-pattern, Arial);
  --ez-combo-box--background-color--xlight: var(--background--xlight, #fff);

  /* input */
  --ez-combo-box__input--background-color: var(--background--medium, #e0e0e0);
  --ez-combo-box__input--border: var(--border--medium, 2px solid);
  --ez-combo-box__input--border-color: var(--ez-combo-box__input--background-color);
  --ez-combo-box__input--focus--border-color: var(--color--primary, #008561);
  --ez-combo-box__input--disabled--background-color: var(--color--disable-secondary, #F2F5F8);
  --ez-combo-box__input--disabled--color: var(--text--disable, #AFB6C0);

  /* buttons */
  --ez-combo-box__btn--color: var(--title--primary, #2B3A54);
  --ez-combo-box__btn-disabled--color: var(--text--disable, #AFB6C0);
  --ez-combo-box__btn-hover--color: var(--color--primary, #4e4e4e);

  /*public*/
  width: var(--ez-combo-box--width);
}

ez-icon {
  --ez-icon--color: inherit;

  /*public*/
  font-weight: var(--text-weight--large, 600);
}

.suppressed-search-input{
  /*public*/
  --ez-text-input__input--border-color: var(--color--strokes, #dce0e8);
  --ez-text-input__input--disabled--background-color: var(--background--xlight, #fff);
  --ez-text-input__input--disabled--color: var(--title--primary, #2B3A54);
}

.btn {
  outline: none;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0px;

  /*public*/
  color: var(--ez-combo-box__btn--color);
}

.btn:disabled {
  cursor: unset;

  /*public*/
  color: var(--ez-combo-box__btn-disabled--color);
}

.btn:disabled:hover {
  cursor: not-allowed;

  /*public*/
  color: var(--ez-combo-box__btn-disabled--color);
}

.btn:hover {
  /*public*/
  color: var(--ez-combo-box__btn-hover--color);
}

.btn__close {
  visibility: hidden;
}

ez-text-input:hover .btn__close, ez-text-input:focus .btn__close {
  visibility: visible;
}

.text-input-slot-container{
  --ez-text-input__icon--width:32px;
  --ez-text-input__min-width: var(--ez-combo-box__min-width);
  --ez-text-input__max-width: var(--ez-combo-box__max-width);
}


@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}