$coral: #ff6252;
$activeCoral: #ed473e;
$disabledCoral: #ffd0cb;
$seafoam: #57c1ad;
$gray: #999;

.base {
  border: 0.1rem solid $coral;
  border-radius: 25rem;
  color: $coral;
  padding: 0.5rem 2.5rem;
  display: inline-flex;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
  font-weight: 700;
  &:hover {
    color: white;
    background-color: $coral;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  &:active {
    background-color: $activeCoral;
  }
}

.disabled {
  color: white;
  background-color: $disabledCoral;
}

.inverted {
  border-color: white;
  padding: 0.6rem 4rem;
  color: white;
  &:hover, &:active {
    border-width: 0.2rem;
    color: white;
    background-color: transparent;
  }
}

.cancel {
  border-color: $gray;
  color: $gray;
  transition: color 0.2s ease, border 0.2s ease;
  &:hover {
    border-color: $coral;
    color: $coral;
    background-color: transparent;
    transition: color 0.2s ease, border 0.2s ease;
  }
}

.filled {
  border-color: $seafoam;
  background-color: $seafoam;
  color: white;
  padding: 0.2rem 1.5rem;
  cursor: default;
  &:hover {
    color: white;
    background-color: $seafoam;
  }
}

.filledX {
  border-color: $seafoam;
  background-color: $seafoam;
  color: white;
  padding: 0.2rem 0.7rem;
  cursor: default;
  &:hover {
    color: white;
    background-color: $seafoam;
    cursor: pointer;
  }
}

.x {
  font-size: 10px;
  margin-left: 0.6rem;
}

.coral {
  color: white;
  background-color: $coral;
  &:hover {
    background-color: $activeCoral;
  }
}