.ui-c-button {
  height: 36px;
  padding: 7px 12px;
  text-decoration: none;
  cursor: pointer;
  border: none;
  border-radius: 6px;
  font-weight: 700;
}

.ui-c-button--primary {
  color: var(--white);
  background-color: var(--brand-primary-normal);
  border: 1px solid var(--brand-primary-normal);

  &:hover {
    opacity: 0.8;
  }
}

.ui-c-button--normal {
  color: var(--link-text);
  background-color: var(--white);
  border: 1px solid var(--gray-normal);

  &:hover {
    background-color: rgb(0 0 0 / 6%);
  }
}

.ui-c-button--text {
  &:hover {
    background-color: rgb(0 0 0 / 6%);
  }
}

.ui-c-button--small {
  height: 28px;
  padding: 4px 10px;
  border-radius: 5px;
}

.ui-c-button--large {
  height: 40px;
  padding: 7px 16px;
  border-radius: 7px;
  font-size: var(--body-2);
}