.Search {
  display: flex;
  align-items: center;
  padding: 3px 5px 3px 15px;
  background: var(--color-fill-1);
  border-radius: var(--radius-md);

  &-icon,
  &-clear {
    font-size: var(--font-size-lg);
  }
  &-icon {
    color: var(--color-text-3);
  }
  &-input {
    flex: 1;
    border: 0;
    padding: 0 9px;

    &::-webkit-search-cancel-button {
      display: none;
    }
  }
  &-input:focus + &-clear,
  &-input:focus ~ .Btn--primary {
    opacity: 1;
  }
  &-clear {
    color: var(--color-text-3);
    opacity: 0;

    &:hover {
      background: initial;
      color: var(--color-text-3);
    }
  }
  &[data-disabled="true"] {
    opacity: 0.5;
  }
  .Btn--primary {
    min-width: 56px;
    margin-left: 6px;
    padding: 2px 12px;
    font-size: var(--font-size-xs);
    opacity: 0;
  }
}