@import '../init';

button {
  border-radius: $border-radius;
  appearance: none;
}

input {
  height: 42px;

  padding: $base-spacing-xsmall;

  border-width: 1px;
  border-style: solid;

  background-color: var(--color-light-bg);

  appearance: none;

  font-weight: $font-weight-light;

  color: var(--color-black-opacity-88);
  caret-color: var(--color-black-opacity-88);

  &::placeholder {
    color: var(--color-black-opacity-40);
  }

  &:focus {
    border-color: $ct-focus-border;
    outline: none;
  }

  &:hover {
    border-color: var(--color-grey-64);
  }

  &:active {
    border-color: var(--color-grey-64);
  }

  &:-webkit-autofill,
  &:-webkit-autofill:hover,
  &:-webkit-autofill:focus {
    box-shadow: 0 0 0 1000px var(--color-light-bg) inset;
  }

  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button {
    margin: 0;

    appearance: none;
  }
}

button {
  padding: 0;

  border: none;

  outline: none;

  background-color: transparent;

  cursor: pointer;
}