@use '@carbon/styles/scss/type';
@use '@carbon/styles/scss/spacing';
@use '@carbon/styles/scss/theme';

.notification-header {
  display: flex;
  flex-direction: column;
  padding: spacing.$spacing-04;
  border-bottom: 1px solid theme.$border-subtle-01;
  background-color: theme.$layer-01;
  flex-shrink: 0;

  &__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: spacing.$spacing-03;
  }

  &__title {
    h4 {
      @include type.type-style('heading-compact-01');

      color: theme.$text-primary;
      margin: 0;
    }
  }

  &__dismiss-btn {
    color: theme.$text-primary;

    &:hover {
      color: theme.$link-primary;
    }
  }

  &__toggle {
    cds-toggle {
      margin: 0;

      ::ng-deep {
        .cds--toggle__label-text {
          color: theme.$text-primary;
        }

        .cds--toggle__label {
          color: theme.$text-primary;
        }

        .cds--toggle__text {
          color: theme.$text-primary;
        }
      }
    }
  }
}
