/* #region Notification overrides */
/* Ensures all notification icons have consistent size */
.k-notification .k-icon.k-svg-icon {
  flex-shrink: 0;
  width: 1.875rem;
  height: 1.875rem;
}

.k-notification.k-notification-closable .k-notification-actions,
.k-notification .k-icon.k-svg-icon:nth-child(1) {
  align-self: flex-start;
  width: 1.875rem;
  height: 1.875rem;
}
/* #endregion Notification overrides */

/* #region fk-banner  */
.k-notification.fk-banner {
  font-weight: 500;
}
/* #region fk-banner colors */
.k-notification.fk-banner.k-notification-error {
  background-color: color-mix(
    in srgb,
    var(--kendo-color-error-subtle) 60%,
    white
  );
  color: color-mix(in srgb, var(--kendo-color-error) 60%, black);
}

.k-notification.fk-banner.k-notification-info {
  background-color: color-mix(
    in srgb,
    var(--kendo-color-info-subtle) 60%,
    white
  );
  color: color-mix(in srgb, var(--kendo-color-info) 60%, black);
}

.k-notification.fk-banner.k-notification-success {
  background-color: color-mix(
    in srgb,
    var(--kendo-color-success-subtle) 60%,
    white
  );
  color: color-mix(in srgb, var(--kendo-color-success) 60%, black);
}

.k-notification.fk-banner.k-notification-warning {
  background-color: color-mix(
    in srgb,
    var(--kendo-color-warning-subtle) 60%,
    white
  );
  color: color-mix(in srgb, var(--kendo-color-warning) 40%, black);
}
/* #endregion fk-banner colors */

/* Adds flex when using custom icons from @featherk/icons */
.k-notification.fk-banner:not(:has(span.k-notification-status))
  .k-notification-content {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.fk-banner--no-shadow {
  box-shadow: none;
}

/* #endregion fk-banner */