@import "../../css/boilerplate.css";

.btn {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  outline: none;
  border: none;
  transition: all 0.3s ease-in-out;
  background-color: transparent;
}

.btn-primary {
  color: var(--white);
  background-color: var(--primary-color);
  border: 2px solid var(--primary-color);
}
.btn-secondary {
  color: var(--white);
  background-color: var(--secondary-color);
  border: 2px solid var(--secondary-color);
}
.btn-success {
  color: var(--white);
  background-color: var(--green);
  border: 2px solid var(--green);
}
.btn-danger {
  color: var(--white);
  background-color: var(--red);
  border: 2px solid var(--red);
}
.btn-warning {
  color: var(--white);
  background-color: var(--orange);
  border: 2px solid var(--orange);
}
.btn-light {
  color: var(--black);
  background-color: var(--light-grey);
  border: 2px solid var(--light-grey);
}
.btn-dark {
  color: var(--white);
  background-color: var(--dark);
  border: 2px solid var(--dark);
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-success:hover,
.btn-danger:hover,
.btn-warning:hover,
.btn-light:hover,
.btn-dark:hover {
  opacity: 0.8;
}

.btn-primary-outline {
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
}
.btn-primary-outline:hover {
  color: var(--white);
  background: var(--primary-color);
}

.btn-secondary-outline {
  color: var(--secondary-color);
  border: 2px solid var(--secondary-color);
}

.btn-secondary-outline:hover {
  color: var(--white);
  background: var(--secondary-color);
}

.btn-success-outline {
  color: var(--green);
  border: 2px solid var(--green);
}

.btn-success-outline:hover {
  color: var(--white);
  background: var(--green);
}

.btn-danger-outline {
  color: var(--red);
  border: 2px solid var(--red);
}

.btn-danger-outline:hover {
  color: var(--white);
  background: var(--red);
}

.btn-warning-outline {
  color: var(--orange);
  border: 2px solid var(--orange);
}

.btn-warning-outline:hover {
  color: var(--white);
  background: var(--orange);
}

.btn-dark-outline {
  color: var(--dark);
  border: 2px solid var(--dark);
}

.btn-dark-outline:hover {
  color: var(--white);
  background: var(--dark);
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* .btn-icon .material-icons-outlined {
  padding: 0 0.5rem;
} */

.btn-floating {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-lg {
  padding: 0.75rem 1.25rem;
  font-size: 1.2rem;
}

.btn-sm {
  padding: 0.3rem 0.8rem;
  font-size: 0.9rem;
}

.btn-disabled {
  opacity: 0.6;
  pointer-events: none;
}

.btn-shadow {
  box-shadow: 0px 3px 1px -2px RGB(0 0 0/20%), 0px 2px 2px 0px RGB(0 0 0/14%),
    0px 1px 5px 0px RGB(0 0 0/12%);
}