.scrollable {
  display: flex;
  width: 100%;

  .items-container {
    display: flex;
    width: 100%;
    height: fit-content;
  }

  &.horizontal {
    flex-direction: row;
    overflow: auto hidden;
    .items-container {
      flex-direction: row;
    }
  }
  &.vertical {
    flex-direction: column;
    height: 100%;
    overflow: hidden auto;
    .items-container {
      flex-direction: column;
    }
  }
  &::-webkit-scrollbar {
    height: 4px;
    width: 4px;
  }
  &::-webkit-scrollbar-track {
    visibility: hidden;
  }
  &::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    visibility: hidden;
  }
  &.scrolling::-webkit-scrollbar-track,
  &.scrolling::-webkit-scrollbar-thumb {
    visibility: visible;
  }
}