.button.MuiButton-root {
  border-radius: 4px;
  text-transform: none;
  box-shadow: none;
  font-weight: 400;
}

/* .primary */
.primary.MuiButton-root {
  color: white;
  background-color: var(--main-purple);
  transition:
    background-color 0.3s,
    border-color 0.3s;
}

.primary.MuiButton-root:hover {
  background-color: #6f46c9;
}

.primary.MuiButton-root:active {
  outline: 4px solid #e4dcf6;
  box-shadow: 0px 0px 0px 4px #9e77ed3d;
  box-shadow: 0px 1px 2px 0px #1018280d;
}

/* .error */
.error.MuiButton-root {
  color: white;
  background-color: var(--border-error-solid);
  box-shadow: none;
  transition:
    background-color 0.3s,
    border-color 0.3s;
}

.error.MuiButton-root:hover {
  background-color: #b32217;
}

.error.MuiButton-root:active {
  outline: 4px solid #fcced7;
  box-shadow: 0px 0px 0px 4px #fcced7;
  box-shadow: 0px 1px 2px 0px #1018280d;
}

/* .disabled-primary */
.primary.MuiButton-root:disabled {
  color: grey;
  background-color: #f3f4f7;
  border-color: #80808033;
  font-weight: 600;
}

/* .secondary-disabled */
.secondary.MuiButton-root:disabled {
  color: grey;
  background-color: white;
  border-color: #80808033;
  font-weight: 600;
}

/* .secondary-purple */
.secondary-purple.MuiButton-root {
  color: #7f3cd9b2;
  border-color: var(--main-purple);
  background-color: white;
  border: 1px solid var(--light-border-color);
}

.secondary-purple.MuiButton-root:hover {
  background-color: #7f3cd919;
  border-color: var(--main-purple);
}

.secondary-purple.MuiButton-root:active {
  outline: 4px solid #d6bbfb;
  background-color: white;
  box-shadow: 0px 0px 0px 4px #9e77ed3d;
  box-shadow: 0px 1px 2px 0px #1018280d;
}

/* .secondary-grey */
.secondary-grey.MuiButton-root {
  color: #808080e6;
  border-color: #80808033;
  background-color: white;
  border: 1px solid var(--light-border-color);
}

.secondary-grey.MuiButton-root:hover {
  background-color: #f9fafb;
  box-shadow: none;
}

.secondary-grey.MuiButton-root:active {
  outline: 4px solid #80808033;
  box-shadow: 0px 0px 0px 4px #98a2b324;
  background-color: white;
  box-shadow: 0px 1px 2px 0px #1018280d;
}
