/* The design system's controls, rebuilt to its own specification: colours,
   radii and states from the tokens, every transition 200ms ease-in-out and
   declared per property. No press states, no movement on hover. */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  column-gap: var(--spacing-icons-button);
  border-radius: 8px;
  border: 1px solid transparent;
  font: var(--t-body-primary-400);
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--transition-default),
    border-color var(--transition-default),
    color var(--transition-default);
}

.button-primary {
  background: var(--c-blue);
  border-color: var(--c-blue);
  color: var(--c-white);
}

.button-primary:hover {
  background: var(--c-blue-lighter);
  border-color: var(--c-blue-lighter);
}

.button-inverted {
  background: var(--c-bg-black);
  border-color: var(--c-neutral-3);
  color: var(--c-neutral-12);
}

.button-inverted:hover {
  background: var(--c-neutral-1);
  border-color: var(--c-neutral-7);
}

.button-big {
  height: 44px;
  padding: 0 24px;
}

.button-medium {
  height: 36px;
  padding: 0 16px;
}

.button-small {
  height: 32px;
  padding: 0 14px;
  font: var(--t-body-small-400);
}

.button-wide {
  width: 100%;
}

.button:disabled {
  background: var(--c-blue-disabled);
  border-color: var(--c-blue-disabled);
  cursor: default;
}

.field {
  display: flex;
  flex-direction: column;
  row-gap: 6px;
}

.field label {
  font: var(--t-body-small-400);
  color: var(--c-neutral-10);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  background: transparent;
  border: 1px solid var(--c-neutral-3);
  border-radius: 8px;
  color: var(--c-white);
  font: var(--t-body-primary-300);
  padding: 0 14px;
  height: 44px;
  transition: border-color var(--transition-default);
}

.field textarea {
  height: auto;
  padding: 12px 14px;
  resize: vertical;
  min-height: 84px;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--c-neutral-7);
}

.field input:hover,
.field textarea:hover,
.field select:hover {
  border-color: var(--c-neutral-7);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--c-neutral-8);
}

.field-small input,
.field-small select {
  height: 36px;
  font: var(--t-body-small-300);
}

.field-error {
  font: var(--t-body-small-300);
  color: var(--c-red);
}

.field input[aria-invalid="true"] {
  border-color: var(--c-red);
}

.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--c-neutral-9) 50%),
    linear-gradient(135deg, var(--c-neutral-9) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}