/* Base */
.notification-button{
  border-color: transparent;
  cursor: pointer;
  width: 28px;
  height: 28px;
}

/* Style: Default */

.notification-button.default {
  background-color: transparent;
  border: none;
  color: var(--primary-700);
}

.notification-button.default .badge{
  top: -4px;
  left: 14px;
  border-color: var(--orange-700);
}

.notification-button.default:hover .badge{
  background-color: var(--warning-200);
}

/* Style: Outline */
.notification-button.outline {
  background-color: var(--gray-25);
  color: var(--gray-900);
  border-color: var(--gray-300);
}

.notification-button.outline:hover {
  background-color: var(--primary-50);
}

.notification-button.outline .badge{
  top: -6px;
  left: 16px;
  border-color: var(--orange-700);
}

.notification-button.outline:hover .badge{
  background-color: var(--warning-200);
}

/* Badge */
.notification-button .badge {
  min-width: var(--spacing-6);
  height: var(--spacing-6);
  color: var(--warning-900);
}

/* Style: External */
.notification-button.external {
  background-color: transparent;
  border: none;
  color: var(--primary-700);
}

.notification-button.external:hover {
  background-color: var(--primary-50);
}

.notification-button.external .badge{
  top: -4px;
  left: 15px;
  background-color: var(--primary-100);
  color: var(--primary-900);
  border-color: var(--primary-500);
}

.notification-button.external:hover .badge{
  background-color: var(--primary-200);
}

/* Style: Internal */
.notification-button.internal {
  background-color: transparent;
  border: none;
  color: var(--blue-700);
}

.notification-button.internal:hover {
  background-color: var(--blue-50);
}

.notification-button.internal .badge{
  top: -4px;
  left: 15px;
  background-color: var(--blue-100);
  color: var(--blue-900);
  border-color: var(--blue-500);
}

.notification-button.internal:hover .badge{
  background-color: var(--blue-200);
}

/* Style: Read */
.notification-button.read {
  background-color: transparent;
  border: none;
  color: var(--gray-700);
}

.notification-button.read:hover {
  background-color: var(--gray-50);
}

.notification-button.read .badge{
  top: -4px;
  left: 15px;
  background-color: var(--gray-100);
  color: var(--gray-900);
  border-color: var(--gray-500);
}

.notification-button.read:hover .badge{
  background-color: var(--gray-200);
}

/* Style: Warning */
.notification-button.warning {
  background-color: transparent;
  border: none;
  color: var(--warning-700);
}

.notification-button.warning:hover {
  background-color: var(--warning-50);
}

.notification-button.warning .badge{
  top: -4px;
  left: 15px;
  background-color: var(--warning-100);
  color: var(--warning-900);
  border-color: var(--warning-500);
}

.notification-button.warning:hover .badge{
  background-color: var(--warning-200);
}


/*  Empty */
.notification-button.disabled {
  border: none;
  color: var(--gray-300);
  pointer-events: none;
  cursor: default;
}

.notification-button.disabled .badge{
  display: none;
}