chromium/chrome/browser/resources/commerce/product_specifications/horizontal_carousel.css

/* Copyright 2024 The Chromium Authors
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

/* #css_wrapper_metadata_start
 * #type=style-lit
 * #import=chrome://resources/cr_elements/cr_hidden_style_lit.css.js
 * #import=chrome://resources/cr_elements/cr_icons_lit.css.js
 * #scheme=relative
 * #include=cr-hidden-style-lit cr-icons-lit
 * #css_wrapper_metadata_end */

 :host {
    --horizontal-carousel-button-size: 32px;

    display: flex;
    isolation: isolate;
    position: relative;
  }

  .carousel-button,
  .hover-layer {
    border-radius: 50%;
    position: absolute;
    top: 44%;
    transform: translateY(-50%);
  }

  .carousel-button {
    --cr-icon-button-size: var(--horizontal-carousel-button-size);
    background-color: var(--color-button-background-tonal);
    margin: 0;
    /* Buttons should display on top of any overflowing text. */
    z-index: 1;
  }

  .hover-layer {
    background: var(--cr-hover-background-color);
    display: none;
    height: var(--horizontal-carousel-button-size);
    width: var(--horizontal-carousel-button-size);
    pointer-events: none;
    z-index: 2;
  }

  #backButton, #backHoverLayer {
    left: calc(-1 * var(--horizontal-carousel-button-size));
  }

  #forwardButton, #forwardHoverLayer {
    right: calc(-1 * var(--horizontal-carousel-button-size));
  }

  #backButton:hover ~ #backHoverLayer,
  #forwardButton:hover ~ #forwardHoverLayer {
    display: block;
  }

  #carouselContainer {
    display: flex;
    flex-wrap: nowrap;
    min-width: 0;
    max-width: 1140px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
  }

  :host(:not([can-scroll])) #carouselContainer {
    scrollbar-width: none;
  }

  :host([can-scroll]) #carouselContainer::-webkit-scrollbar {
    background: transparent;
    height: 6px;
  }

  :host([can-scroll]) #carouselContainer::-webkit-scrollbar-thumb {
    background:
        var(--color-product-specifications-horizontal-carousel-scrollbar-thumb);
    border-radius: 8px;
  }

  ::slotted([slot=selector]) {
    position: sticky;
    right: 0;
    top: 0;
  }

  :host([can-scroll]) ::slotted([slot=selector]) {
    /* Prevent scrolling past the slotted selector. */
    position: absolute;
    z-index: 2;
  }

  #gradientLayer {
    display: none;
  }

  :host([can-scroll]) #gradientLayer {
    background: linear-gradient(270deg, white 10%, transparent 110%);
    display: block;
    height: 50px;
    position: absolute;
    right: 0;
    top: 0;
    width: 134px;
    z-index: 1;
  }