:host {
  position: relative;
  display: flex;
  height: 2.75rem;
  height: var(--scout-input-height);
  --scout-input-height: 2.75rem;
  --scout-input-padding: var(--spacing-3);
  --scout-input-border-radius: 0.875rem;
  --scout-input-type: var(--type-body-base);
  --scout-input-icon-size: var(--spacing-4);
}

:host(.large) {
  --scout-input-height: var(--spacing-14);
  --scout-input-padding: var(--spacing-4);
  --scout-input-border-radius: 16px;
  --scout-input-type: var(--type-body-lg);
  --scout-input-icon-size: var(--spacing-5);
}

.input {
  flex: 1;
  padding: var(--scout-input-padding);
  font: var(--scout-input-type);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--scout-input-border-radius);
  background-color: var(--color-gray-50);
  color: var(--color-text-base);
}

.icon {
  position: absolute;
  left: var(--scout-input-padding);
  top: 50%;
  transform: translateY(-50%);
  width: var(--scout-input-icon-size);
  height: var(--scout-input-icon-size);
  background-color: var(--color-neutral-500);
  -webkit-mask-image: var(--icon);
          mask-image: var(--icon);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  pointer-events: none;
}

:host(.has-icon) .input {
  padding-left: calc(
    var(--scout-input-padding) +
    var(--scout-input-icon-size) +
    var(--spacing-2)
  );
}

.clear-btn {
  position: absolute;
  right: calc((var(--scout-input-height) - var(--spacing-8)) / 2);
  top: 50%;
  transform: translateY(-50%);
  width: var(--spacing-8);
  height: var(--spacing-8);
  border-radius: 50%;
  background-color: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;

  /* Touch target */
}

.clear-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--spacing-10);
    height: var(--spacing-10);
  }

.clear-icon {
  display: block;
  width: var(--spacing-5);
  height: var(--spacing-5);
  background-color: var(--color-neutral-500);
  -webkit-mask-image: var(--icon-x);
          mask-image: var(--icon-x);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.clear-btn:hover {
  background-color: var(--color-gray-200);
}

.clear-btn:hover .clear-icon {
    background-color: var(--color-neutral-700);
  }

:host(.has-clear) .input {
  padding-right: calc(
    var(--scout-input-padding) +
    var(--spacing-6) +
    var(--spacing-2)
  );
}

.input:disabled {
  background-color: var(--color-gray-100);
  color: var(--color-gray-700);
  cursor: not-allowed;
}