button,
.btn,
a.btn {
  padding: 8px 12px;
  gap: 0.5rem;
  border-radius: 3.40282e38px;
  text-transform: none;
  font-weight: 500;
  display: flex;
  align-items: center;
  text-decoration: none;
  border: none;
}

button:hover,
.btn:hover {
  opacity: 0.9;
}

.btn-transparent {
  background: none;
}

.btn-transparent:hover {
  background: var(--light-btn-grey);
  color: black;
}

.btn-default {
  background: var(--dark-grey);
  color: var(--white);
}

.btn-primary {
  background: var(--sw-dark-green) !important;
  color: var(--white);
}

.btn-white,
.btn-white:hover {
  color: var(--sw-dark-green) !important;
  background: var(--white);
}

.btn-primary-gradient {
  background-image: linear-gradient(to right in oklab, rgb(63, 178, 141) 0%, rgb(146, 227, 140) 100%);
  color: var(--white);
}

.btn-primary-gradient:hover {
  color: var(--white);
}

.btn-outlined {
  background: transparent;
  border: 1px solid var(--light-btn-grey);
}

.btn-outlined:hover {
  background-color: var(--light-btn-grey);
}

.btn-transparent-danger {
  background: transparent;
  color: var(--strong-grey);
}

.btn-transparent-danger:hover {
  background: var(--light-btn-grey);
  color: var(--dark-pink);
}

.btn-shadow {
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
}

.badge {
  border-radius: 8px;
  font-size: 12px;
  padding: 3px 8px;
  line-height: 16px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.badge.badge-primary {
  background-color: var(--sw-subtle-green);
  color: var(--sw-dark-green);
}

.badge.badge-green {
  background-color: var(--sw-light-green);
  color: var(--strong-grey);
}

.badge.badge-primary-fill {
  color: var(--white);
  background-color: var(--sw-dark-green);
}

.badge.badge-warning {
  background-color: #fff9e6;
  color: var(--orange);
}

.badge.badge-outlined {
  color: black;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.badge.rounded {
  border-radius: 30px !important;
}

.btn-linkedin {
  background: #0077b5e6 !important;
  color: var(--white);
}
.btn-linkedin:hover {
  color: var(--white);
}

.btn-linkedin-outline {
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.btn-linkedin-outline:hover {
  color: var(--white);
  background: #0077b5e6 !important;
}

.btn-twitter-outline {
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.btn-twitter-outline:hover {
  color: var(--white);
  background: #1da1f2 !important;
}


.text-accent {
  color: var(--sw-dark-green);
}


@media only screen and (max-width: 800px) {
  button, .btn {
    padding: 4px 10px;
  }
}