@layer component.base {
  .vista {
    scrollbar-width: none;
    white-space: nowrap;
    overflow: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    height: 100%;
  }

  .vista__view {
    scroll-snap-align: start;
    display: inline-flex;
    flex-direction: column;
    vertical-align: top;
    width: 100%;
    max-height: 100%;
    white-space: normal;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: auto;
    height: inherit;
  }

  .vista__view[hidden] {
    display: none;
  }

  .vista__text {
    margin: auto 0;
  }

  .vista__below-icon {
    margin: auto 0;
  }

  .vista__item {
    display: grid;
    grid-template-columns: 1fr max-content;
    &:focus {
      outline: none;
    }
  }

  .vista__title:focus {
    outline: none;
  }

  .vista__footer {
    padding-inline: var(--1);
    margin-block: auto var(--1);
  }

  .vista__title {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }

  .vista__item--title {
    cursor: default;
  }

  .vista__sticker {
    position: sticky;
    top: 0;
    z-index: 1;
  }
}