.slider {
  display: grid;
  justify-items: center;
  overflow: hidden;
  gap: 0.2em;

  .media {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;

    align-items: center;

    &>* {
      flex: 0 0 100%;
      scroll-snap-align: start;
    }
  }

  .controls {
    display: flex;
    align-items: center;
    gap: 1rem;

    .arrow {
      background: hsl(var(--theme-popup-border-h), var(--theme-popup-border-s), var(--theme-popup-border-l), 0.4);
      color: var(--fg);
      border-radius: 0.8rem;
      padding: 0.4rem;

      cursor: pointer;
      user-select: none;
    }

    #indicators {
      display: flex;
      gap: 0.7rem;
      overflow-y: visible;

      button {
        width: 2.4em;
        height: 2.4em;

        background-size: cover;
        background-position: center;
        border: none;
        border-radius: 0.8em;

        cursor: pointer;
        user-select: none;

        &.active {
          outline: 2px solid var(--sidebar-active);
        }

        &:hover {
          transform: scale(1.1);
          transition: transform 0.2s;
        }
      }
    }
  }
}
