@mixin notification-configs {
  @include notification-tokens;
  @include notification-default;
  @include notification-header;
  @include notification-body;
}

@mixin notification-tokens {
  --notification-padding: var(--spacing-scale-2x) var(--spacing-scale-4x);
  --notification-width: 50vw;
  --notification-height: calc(100vh - 86px);
}

@mixin notification-default {
  background: var(--background);
  box-shadow: var(--surface-shadow-md);
  max-height: var(--notification-height);
  max-width: var(--notification-width);
  overflow: auto;
  z-index: 1;

  @media (max-width: $grid-breakpoint-sm) {
    --item-padding-x: var(--spacing-scale-2x);
    --item-padding-y: var(--spacing-scale-base);
    --item-padding: var(--item-padding-y) var(--item-padding-x);
    --notification-padding: var(--item-padding);
    --notification-width: 100vw;
    min-height: var(--notification-height);
    overflow: hidden;

    .#{$prefix}tab {
      --tab-size: var(--tab-small);

      .tab-content {
        --notification-height: calc(100vh - 86px);
        height: var(--notification-height);
        overflow-x: auto;
      }
    }

    .status {
      left: var(--spacing-scale-half) !important;
      top: var(--spacing-scale-2x) !important;
    }

    &.close {
      display: none;
    }
  }

  @media (max-width: $grid-breakpoint-md) {
    &.close {
      display: none;
    }
  }

  @media (min-width: $grid-breakpoint-md) {
    div.close {
      display: none;
    }
  }
}

@mixin notification-header {
  .notification-header {
    border-bottom: 1px solid var(--border-color);
    padding: var(--notification-padding);

    *:last-child {
      margin-bottom: 0;
    }
  }
}

@mixin notification-body {
  .notification-body {
    .#{$prefix}tab {
      .tab-item {
        padding: 0;
      }

      .tab-content {
        overflow-y: auto;
        .#{$prefix}item {
          --interactive-rgb: var(--rgb-secondary-08);
          --item-color: var(--text-color);
          padding: var(--notification-padding);
          position: relative;
          white-space: normal;

          .status {
            left: var(--spacing-scale-base);
            position: absolute;
            top: var(--spacing-scale-3x);
          }

          span {
            display: block;
          }
        }
      }
    }
  }
}