.tul-components-inline-view {
  max-width: 100%;
  width: 100%;
  padding: 0 !important;
  margin: 0;
  position: relative;
}

/**
 * Content
 **/
.tul-components-inline-view .tul-components-inline-view-content {
  max-width: 100%;
  width: 100%;
  overflow-y: hidden;
  overflow-x: auto;
  padding: 0 !important;
}

.tul-components-inline-view .tul-components-inline-view-content .tul-components-inline-view-items-container {
  display: grid;
  grid-template-columns: repeat(var(--items-count), 1fr);
  grid-template-rows: 1fr;
  grid-auto-flow: column;
  grid-gap: 0;
  justify-content: stretch;
  align-content: stretch;
  justify-items: stretch;
  align-items: stretch;
  width: calc(var(--items-count) * var(--items-width));
  --usable-space-padding: 0px;
  width: calc(calc(var(--items-count) * var(--items-width)) - var(--usable-space-padding));
}

.tul-components-inline-view .tul-components-inline-view-content .tul-components-inline-view-items-container .tul-components-inline-view-item {
  padding: 8px;
}

.tul-components-inline-view .tul-components-inline-view-content .tul-components-inline-view-items-container .tul-components-inline-view-item>* {
  width: 100% !important;
  height: 100% !important;
}

.tul-components-inline-view.mobile {
  --max-items-displayed: 1 !important;
  --items-width: 100% !important;
}

.tul-components-inline-view.mobile .tul-components-inline-view-content .tul-components-inline-view-items-container {
  --usable-space-padding: 120%;
  --usable-space-padding: var(--twig-var-usableSpacePadding);
}

.tul-components-inline-view.mobile .tul-components-inline-view-controls {
  display: none;
}

/**
 * Single item view
 **/
.tul-components-inline-view.single {
  --max-items-displayed: 1 !important;
  --items-width: 100% !important;
}

.tul-components-inline-view.single .tul-components-inline-view-content .tul-components-inline-view-items-container {
  width: 100%;
}

/**
 * Colors and scrolbars
 **/

.tul-components-inline-view {
  --tul-components-inline-view-controls-button-color: white;
  --tul-components-inline-view-main-scrollbar-color: red;
  --tul-components-inline-view-button-scrollbar-color: blue;
  --tul-components-inline-view-controls-button-color-border: var(--tul-components-inline-view-controls-button-color);
}

.tul-components-inline-view .tul-components-inline-view-controls {
  margin-top: 8px;
}

.tul-components-inline-view .tul-components-inline-view-controls>.tul-components-inline-view-controls-inner {
  display: flex;
  grid-gap: 0.875rem;
  justify-content: flex-end;
}

.tul-components-inline-view .tul-components-inline-view-controls button {
  background-color: transparent;
  border-radius: 30rem;
  border-style: solid;
  border-color: var(--tul-components-inline-view-controls-button-color-border);
  color: var(--tul-components-inline-view-controls-button-color);
  display: inline-block;
  aspect-ratio: 1/1;
  width: 2.5rem;
  height: 2.5rem;
}

.tul-components-inline-view .tul-components-inline-view-controls button>.tul-components-inline-view-control-icon {
  display: flex;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
  aspect-ratio: 1/1;
}

.tul-components-inline-view .tul-components-inline-view-controls button>.tul-components-inline-view-control-icon>svg {
  display: block;
  aspect-ratio: 1/1;
}

/** Scrolbar **/
/* * Firefox */
.tul-components-inline-view .tul-components-inline-view-content {
  scrollbar-color: var(--tul-components-inline-view-main-scrollbar-color) var(--tul-components-inline-view-button-scrollbar-color);
}

/* * Chrome, Edge, and Safari */
.tul-components-inline-view .tul-components-inline-view-content::-webkit-scrollbar {
  background: var(--tul-components-inline-view-main-scrollbar-color);
}

.tul-components-inline-view .tul-components-inline-view-content::-webkit-scrollbar-track {
  background: var(--tul-components-inline-view-main-scrollbar-color);
}

.tul-components-inline-view .tul-components-inline-view-content::-webkit-scrollbar-thumb {
  background: var(--tul-components-inline-view-button-scrollbar-color);
  background-color: var(--tul-components-inline-view-button-scrollbar-color);
  border-color: var(--tul-components-inline-view-main-scrollbar-color);
}