@itwin/itwinui-css/css/carousel.css

CSS library for building beautiful and well working web UI components within Bentley Systems & iTwin.js applications.

/*---------------------------------------------------------------------------------------------
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
.iui-carousel{border-radius:var(--iui-border-radius-1);display:grid;overflow:hidden}.iui-carousel:focus-visible{outline:1px solid var(--iui-color-border-accent);outline-offset:4px}.iui-carousel-slider{gap:var(--iui-size-xs);scroll-snap-type:x mandatory;scrollbar-width:none;order:-1;margin:0;padding:0;list-style:none;display:flex;overflow-x:auto}.iui-carousel-slider::-webkit-scrollbar{display:none}.iui-carousel-slider-item{scroll-snap-align:center;flex-shrink:0;inline-size:100%}.iui-carousel-slider-item:focus-visible{outline-offset:-2px}.iui-carousel-navigation{block-size:calc(var(--iui-size-s)*3);border-block-start:var(--iui-size-3xs)solid var(--iui-color-border);align-items:center;display:flex}.iui-carousel-navigation-left,.iui-carousel-navigation-right{flex:1;align-items:center;display:flex}.iui-carousel-navigation-dots{vertical-align:baseline;max-inline-size:calc(var(--iui-size-2xl)*4);border-radius:var(--iui-border-radius-1);white-space:nowrap;scrollbar-width:none;border:none;margin:0;padding:0;overflow-x:auto}.iui-carousel-navigation-dots::-webkit-scrollbar{display:none}.iui-carousel-navigation-dots:has(:focus-visible){outline:2px solid var(--iui-color-border-accent);outline-offset:-1px}@supports not selector(:has(+ *)){.iui-carousel-navigation-dots:focus-within{outline:2px solid var(--iui-color-border-accent);outline-offset:-1px}}.iui-carousel-navigation-dot{--_iui-button-gap:var(--iui-size-2xs);--_iui-button-padding-block:0;--_iui-button-padding-inline:var(--iui-size-xs);--_iui-button-min-height:var(--iui-component-height-small);cursor:pointer;block-size:var(--_iui-button-height);padding-inline:var(--_iui-button-padding-inline);background-color:#0000;border:none}.iui-carousel-navigation-dot:hover:after{background-color:var(--iui-color-icon-muted-hover)}.iui-carousel-navigation-dot:after{inline-size:var(--iui-size-s);block-size:var(--iui-size-s);content:"";background-color:var(--iui-color-icon-muted);box-shadow:inset 0 0 0 0 var(--iui-color-background);border:1px solid #0000;border-radius:50%;flex-shrink:0;display:flex}.iui-carousel-navigation-dot.iui-first:after{transform:scale(.5)}.iui-carousel-navigation-dot.iui-second:after{transform:scale(.75)}.iui-carousel-navigation-dot.iui-active:after{background-color:var(--iui-color-icon-accent);border-color:var(--iui-color-icon-accent);box-shadow:inset 0 0 0 1px var(--iui-color-background)}@media (forced-colors:active){.iui-carousel-navigation-dot.iui-active:after{border-width:var(--iui-size-xs)}}.iui-carousel-navigation-dot:focus{outline-color:#0000}.iui-carousel-navigation-right{justify-content:flex-end}