.button {
  display: inline-flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  outline: 0px;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  appearance: none;
  text-decoration: none;
  font-family: var(--roboto-sans-serif);
  border-radius: 1px;
  letter-spacing: 0.02857em;
  border: 0px;
  transition: var(--transition-button);
  color: var(--color-withe-text);
  background-color: var(--color-primary);
  width: 10%;
  height: 100%;
  border-radius: 0.2rem;
}

.large {
  width: 100px;
  height: 30px;
}

.medium {
  width: 100px;
  height: 30px;
}

.error {
  background-color: var(--color-error);
}

.button:hover {
  -webkit-text-decoration: none;
  text-decoration: none;
  background-color: var(--color-primary-hover);
}

.error:hover {
  background-color: var(--color-error-hover);
}