:root {
  --nb-default-color: var(--color-gray);
  --nb-default-bg: var(--color-white);
  --nb-default-border: var(--color-white);

  --nb-primary-color: var(--color-white);
  --nb-primary-bg: var(--color-primary);
  --nb-primary-border: var(--color-primary);

  --nb-success-color: var(--color-white);
  --nb-success-bg: var(--color-success);
  --nb-success-border: var(--color-success);

  --nb-danger-color: var(--color-white);
  --nb-danger-bg: var(--color-danger);
  --nb-danger-border: var(--color-danger);
}

.notificationsBar {
  padding: calc(var(--line-height-computed) / 2);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-weight: 600;
}

@mixin nb-variant($color, $background, $border) {
  color: $color;
  background-color: $background;
  border-color: $border;
}

.retryButton {
  background-color: transparent;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  display: inline;
  margin: 0;
  padding: 0;
  color: var(--nb-primary-color);
}

.default {
  @include nb-variant(var(--nb-default-color), var(--nb-default-bg), var(--nb-default-border));
}

.primary {
  @include nb-variant(var(--nb-primary-color), var(--nb-primary-bg), var(--nb-primary-border));
}

.success {
  @include nb-variant(var(--nb-success-color), var(--nb-success-bg), var(--nb-success-border));
}

.danger {
  @include nb-variant(var(--nb-danger-color), var(--nb-danger-bg), var(--nb-danger-border));
}