.button {
  color: white;
  background-color: var(--primary-color-5);
  border-radius: var(--border-radius);
  border: none;
  box-sizing: border-box;
  cursor: pointer;
  /*display: block;*/
  display: flex;
  font-size: 1.2rem;
  line-height: 2rem;
  min-height: 50px;
  min-width: 50px;
  width: fit-content;
  padding: 0.5rem 1rem;
  text-align: center;
  transition: var(--main-transition);
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;

  &:focus {
    box-shadow: var(--bs-04);
    outline: none;
  }

  &:hover {
    box-shadow: var(--bs-04);
  }
}

.button--secondary {
  background-color: var(--secondary-color-5);
  color: black;
}

.delete-button {
  display: flex ;
  color: var(--red-color);
  background: none;
  min-height: var(--input-height);
  font-size: 0.9rem;
  font-weight: 700;
  transition: all var(--main-transition);

  &:focus, &:hover {
    text-decoration: underline;
  }
}

.cancel-button {
  min-height: var(--input-height);
  font-size: 1.2rem;
  transition: all var(--main-transition);
  width: var(--input-height);
  margin-left: auto;
  border-radius: var(--border-radius);

  &:focus, &:hover {
    background-color: var(--red-color);
  }
}