button {
  display: block;
  font-size: 1.25rem;
  font-weight: 600;
  height: 3rem;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: background-color 0.25s ease-in-out;
}
.default {
  width: 100%;
}

.disabled {
  cursor: not-allowed;
  filter: grayscale(50%);
}

.green {
  background-color: var(--accept);
  &:hover {
    background-color: var(--accept-hover);
  }
}

.red {
  background-color: var(--delete);
  &:hover {
    background-color: var(--delete-hover);
  }
}

.blue {
  background-color: var(--edit);
  &:hover {
    background-color: var(--edit-hover);
  }
}

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

.w1 {
  width: 1rem !important;
}

.w2 {
  width: 2rem !important;
}

.w3 {
  width: 3rem !important;
}

.w4 {
  width: 4rem !important;
}

.w5 {
  width: 5rem !important;
}

.w6 {
  width: 6rem !important;
}

.w7 {
  width: 7rem !important;
}

.w8 {
  width: 8rem !important;
}

.w9 {
  width: 9rem !important;
}

.w10 {
  width: 10rem !important;
}

.w11 {
  width: 11rem !important;
}

.w12 {
  width: 12rem !important;
}

.w13 {
  width: 13rem !important;
}

.w14 {
  width: 14rem !important;
}

.w15 {
  width: 15rem !important;
}

.w16 {
  width: 16rem !important;
}

.w17 {
  width: 17rem !important;
}

.w18 {
  width: 18rem !important;
}

.w19 {
  width: 19rem !important;
}

.w20 {
  width: 20rem !important;
}

.w21 {
  width: 21rem !important;
}

.w22 {
  width: 22rem !important;
}

.w23 {
  width: 23rem !important;
}

.w24 {
  width: 24rem !important;
}

.w25 {
  width: 25rem !important;
}
