button {
  border-radius: 8px;
  border: none;
  color: var(--neutral-3);
  font-size: var(--small);
  padding: 14px;
  width: 100%;
  transition: transform 80ms ease-in;
}

button:active {
  transform: scale(0.95);
}

button:focus {
  outline: none;
}

button.ghost {
  color: var(--neutral-6);
  background-color: transparent;
}

button.ghost-white {
  color: var(--neutral-3);
  background-color: transparent;
}

button.green {
  background-color: var(--success-1);
}

button.blue {
  background-color: var(--brand-4);
}

button.red{
  background-color: var(--brand-2);
}

button.yellow {
  background-color: transparent;
  color: var(--brand-1);
  border-radius: 12px;
  border: var(--brand-1) 2px solid;
}

button.blue-outline {
  color: var(--brand-4);
  background-color: transparent;
}

button.border-neutral-7 {
  border: 1px solid var(--neutral-7);
}

button.border-error-1 {
  border: 1px solid var(--error-1);
  color: var(--error-1);
}

button.border-success-1 {
  border: 1px solid var(--success-1);
  color: var(--success-1);
}

button.border-blue {
  border: 1px solid var(--brand-4);
  background-color: var(--neutral-3);
  color: var(--brand-4);
}

.icon-button{
  height: 48px;
  width: 48px;
  border-radius: 24px;
  position: relative;
}

.icon-button img{
  position: absolute;
  transform: translate(-50%, -50%);
}