@import '../../../../assets/scss/_basics/colors.scss';

.btn-primary-icon {
  color: var(--color-main);
  background-color: transparent;
  cursor: pointer;
  border: 1px solid var(--color-main);
  border-radius: 50%;
  padding: 5px;
  transition: all 0.3s;
}

.btn-primary-icon:hover {
  color: var(--color-fg-inv);
  background-color: var(--color-main);
  border-color: var(--color-main);
}

.btn-primary-icon:active {
  background-color: var(--color-main-dark);
  border-color: var(--color-main-dark);
}

.btn-success-icon {
  color: var(--color-success);
  background-color: transparent;
  cursor: pointer;
  border: 1px solid var(--color-success);
  border-radius: 50%;
  padding: 5px;
  transition: all 0.3s;
}

.btn-success-icon:hover {
  color: var(--color-fg-inv);
  background-color: var(--color-success);
  border-color: var(--color-success);
}

.btn-success-icon:active {
  background-color: var(--color-success-dark);
  border-color: var(--color-success-dark);
}

.btn-danger-icon {
  color: var(--color-danger);
  background-color: transparent;
  cursor: pointer;
  border: 1px solid var(--color-danger);
  border-radius: 50%;
  padding: 5px;
  transition: all 0.3s;
}

.btn-danger-icon:hover {
  color: var(--color-fg-inv);
  background-color: var(--color-danger);
  border-color: var(--color-danger);
}

.btn-danger-icon:active {
  background-color: var(--color-danger-dark);
  border-color: var(--color-danger-dark);
}

.btn-secondary-icon {
  color: var(--color-secondary);
  background-color: transparent;
  cursor: pointer;
  border: 1px solid var(--color-secondary);
  border-radius: 50%;
  padding: 5px;
  transition: all 0.3s;
}

.btn-secondary-icon:hover {
  color: var(--color-fg-inv);
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.btn-secondary-icon:active {
  background-color: var(--color-secondary-dark);
  border-color: var(--color-secondary-dark);
}

.btn-warning-icon {
  color: var(--color-warning);
  background-color: transparent;
  cursor: pointer;
  border: 1px solid var(--color-warning);
  border-radius: 50%;
  padding: 5px;
  transition: all 0.3s;
}

.btn-warning-icon:hover {
  color: var(--color-fg-inv);
  background-color: var(--color-warning);
  border-color: var(--color-warning);
}

.btn-warning-icon:active {
  background-color: var(--color-warning-dark);
  border-color: var(--color-warning-dark);
}