/* Shared button components. */

.c-button,
.main-button,
.secondary-button,
.navy-button,
.blue-button,
.matt-button {
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 10px;
  text-align: center;
  cursor: pointer;
  outline: none;
}

.c-button--primary,
.main-button {
  background-color: rgba(16, 182, 158, 0.85);
  color: var(--color-white);
}

.c-button--secondary,
.secondary-button {
  background-color: rgba(43, 155, 166, 0.85);
  color: var(--color-white);
}

.c-button--navy,
.navy-button {
  background-color: var(--color-navy);
  color: #FFC107;
}

.c-button--blue,
.blue-button {
  background-color: #4F7191;
  color: var(--color-white);
}

.c-button--muted,
.unuse-button {
  background-color: var(--color-surface-soft);
  color: var(--color-muted);
}

.c-button--compact,
.matt-button {
  background-color: #44546A;
  color: var(--color-white);
  padding: 1px 10px;
}

.c-button p,
.main-button p,
.secondary-button p,
.unuse-button p {
  color: inherit;
  margin: 0;
  padding: 0;
  font-weight: 300;
  background-color: transparent;
}

.c-button:hover,
.main-button:hover,
.secondary-button:hover,
.navy-button:hover,
.blue-button:hover,
.matt-button:hover {
  filter: brightness(85%);
}