// CustomScrollbar -- a scrolling region with a themed scrollbar.
//
//   <CustomScrollbar maxHeight="20rem">...long content...</CustomScrollbar>
//
// Scrollbar appearance is CSS, not script: scrollbar-width and scrollbar-color
// are the standard properties, and the ::-webkit-scrollbar rules cover the
// browsers that still need them.
//
// This component used to declare a scroll output it never emitted, and its
// props were columns, gap and maxWidth copied from a grid scaffold. The output
// is removed rather than left unimplemented -- a caller can listen for a plain
// scroll event on the element, which is what it would have been anyway.
//
// NOTE: the style block uses /* */ comments only -- // is not a CSS comment
// and silently swallows the rule that follows it.
component CustomScrollbar {
  props {
    color: string = "primary"
    size: string = "default"
    axis: string = "vertical"
    // Track thickness in pixels. Clamped, because it arrives as an attribute
    // and a scrollbar wider than the content is not useful to anyone.
    thickness: number = 8
    maxHeight: string = "20rem"
    radius: string = "999px"
    class: string = ""
  }

  functions {
    shared function trackSize() {
      var value = Number(thickness)
      if (!value || value < 2) {
        return 8
      }
      return Math.min(24, value)
    }
  }

  view {
    <div
      {...attrs}
      data-ui-component="CustomScrollbar"
      class='wrn-scrollbar {class}'
      data-color='{color}'
      data-size='{size}'
      data-axis='{axis}'
      style='--scrollbar-thickness:{trackSize()}px;--scrollbar-radius:{radius};max-height:{maxHeight};'
    >
      <slot />
    </div>
  }

  style {
    .wrn-scrollbar {
      --scrollbar-accent: var(--wrn-color-primary);
      min-width: 0;
      overflow: auto;
      /*
       * The standard properties. Firefox and current Chrome honour these; the
       * webkit rules below are only for the engines that still ignore them.
       */
      scrollbar-width: thin;
      scrollbar-color: color-mix(in srgb, var(--scrollbar-accent) 55%, transparent) transparent;
      overscroll-behavior: contain;
    }

    .wrn-scrollbar[data-color="secondary"] {
      --scrollbar-accent: var(--wrn-color-secondary);
    }

    .wrn-scrollbar[data-color="success"] {
      --scrollbar-accent: var(--wrn-color-success);
    }

    .wrn-scrollbar[data-color="danger"] {
      --scrollbar-accent: var(--wrn-color-danger);
    }

    .wrn-scrollbar[data-color="info"] {
      --scrollbar-accent: var(--wrn-color-info);
    }

    .wrn-scrollbar[data-axis="vertical"] {
      overflow-x: hidden;
      overflow-y: auto;
    }

    .wrn-scrollbar[data-axis="horizontal"] {
      overflow-x: auto;
      overflow-y: hidden;
    }

    .wrn-scrollbar::-webkit-scrollbar {
      width: var(--scrollbar-thickness, 8px);
      height: var(--scrollbar-thickness, 8px);
    }

    .wrn-scrollbar::-webkit-scrollbar-track {
      background: var(--wrn-color-surface-soft);
      border-radius: var(--scrollbar-radius, 999px);
    }

    .wrn-scrollbar::-webkit-scrollbar-thumb {
      background: color-mix(in srgb, var(--scrollbar-accent) 45%, transparent);
      border-radius: var(--scrollbar-radius, 999px);
    }

    .wrn-scrollbar::-webkit-scrollbar-thumb:hover {
      background: var(--scrollbar-accent);
    }

    /*
     * A pointer-less device paints its own overlay scrollbar and ignores the
     * width above, so the region keeps its own padding instead.
     */
    @media (hover: none) {
      .wrn-scrollbar {
        scrollbar-width: auto;
      }
    }
  }
}