.sg-scrollable-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;

  &__header {
    flex-shrink: 0;
    z-index: 15;
  }

  &__content {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    overflow-y: auto;
    height: 100%;
    padding: var(--space-medium) var(--space-large);
    // When header is present, the content will automatically take remaining space
    min-height: 0; // Allow flexbox to shrink this below its content size
  }

  &__scroll-button {
    position: absolute;
    bottom: 190px; // Default position, can be customized via props
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);

    // When visible, fade in
    &.visible {
      opacity: 1;
      visibility: visible;
    }
  }

  &__fade-overlay {
    position: absolute;
    bottom: 79px; // Default position, can be customized via props
    left: -12px; // Extend beyond container boundaries
    right: -12px; // Extend beyond container boundaries
    height: 50px;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(255, 255, 255, 0.8) 70%,
      rgba(255, 255, 255, 0.95) 100%
    );

    // When visible, fade in
    &.visible {
      opacity: 1;
      visibility: visible;
    }

    // Alternative dark theme support using a class-based approach
    .dark-theme & {
      background: linear-gradient(
        to bottom,
        rgba(33, 37, 41, 0) 0%,
        rgba(33, 37, 41, 0.8) 70%,
        rgba(33, 37, 41, 0.95) 100%
      );
    }
  }
}