.conductor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--spacing-6);
  padding: 0 var(--spacing-3);

  border: none;
  border-radius: var(--radius-medium-2);

  background: var(--blue-9);

  color: var(--white);
  font-size: var(--font-size-1);
  font-weight: 510;
  letter-spacing: var(--letter-spacing-2);
  line-height: var(--line-height-2);

  cursor: pointer;
  gap: var(--spacing-2);

  &:focus,
  &:hover {
    outline: 2px solid var(--blue-8);
    outline-offset: 2px;
  }

  &:disabled {
    border: 0;

    background: var(--slate-3);

    color: var(--slate-8);

    cursor: not-allowed;
  }

  &.conductor-button--size-1 {
    padding: 0 var(--spacing-2);
    gap: var(--spacing-1);

    border-radius: var(--radius-medium-1);
  }

  &.conductor-button--surface {
    border: 1px solid var(--blue-8);

    background: var(--blue-3);

    color: var(--blue-11);

    &:disabled {
      border: 0;

      background: var(--slate-2);

      color: var(--slate-8);
    }
  }
}
