@mixin sc-notifications-button-theme($theme) {
  // Extract the palettes you need from the theme definition.
  $primary: map-get($theme, primary);
  $foreground: map-get($theme, foreground);
  $background: map-get($theme, background);

  .notifications {
    &__date-header {
      color: map-get($foreground, secondary-text);
      font-size: 12px;
      line-height: 12px;
      font-weight: 500;
      text-transform: uppercase;
    }

    &__description,
    &__timestamp {
      color: map-get($foreground, secondary-text);
    }

    &__item {
      color: map-get($foreground, text);
      background-color: map-get($background, card);

      &:not(.notifications__item-empty):hover {
        background-color: map-get($background, hover);
      }

      .mat-icon {
        color: map-get($primary, 500);
      }

      &--read {
        color: map-get($foreground, disabled-text);

        .mat-icon {
          color: map-get($foreground, disabled-text);
        }

        .notifications__description {
          color: map-get($foreground, disabled-text);
        }

        .notifications__timestamp {
          color: map-get($foreground, disabled-text);
        }
      }
    }
  }
}