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

.notification-button i {
  display: inline-block;
}

.notification-button.is-shaking i {
  animation: notification-shake 500ms ease-in-out;
}

@keyframes notification-shake {
  0% { transform: translateX(0) rotate(0); }
  12% { transform: translateX(-2px) rotate(-6deg); }
  24% { transform: translateX(3px) rotate(6deg); }
  36% { transform: translateX(-3px) rotate(-6deg); }
  48% { transform: translateX(3px) rotate(6deg); }
  60% { transform: translateX(-2px) rotate(-4deg); }
  100% { transform: translateX(0) rotate(0); }
}

/* 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;
}