.tab-list {
  --animate-duration: 150ms;
  --animate-mode: linear;

  position: relative;
  display: flex;
  width: 100%;
  padding-bottom: 2px;
  overflow: auto;
  /* stylelint-disable-next-line declaration-block-no-duplicate-properties */
  overflow: overlay;
  border-bottom: 1px solid #eee;

  &::-webkit-scrollbar {
    display: none;
    height: 4px;
    background-color: transparent;
    border-radius: 6px;
    transition: all 500ms linear;
  }

  &:hover::-webkit-scrollbar {
    display: block;
  }

  &::-webkit-scrollbar-thumb {
    cursor: pointer;
    background-color: #eee;
    border-radius: 6px;
    transition: background-color 500ms linear;

    &:hover {
      background-color: var(--primary-color);
    }
  }
}

.tab-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 10px;
  height: 2px;
  background-color: var(--primary-color);
  border-radius: 2px;
  transition: width var(--animate-duration) var(--animate-mode),
    transform var(--animate-duration) var(--animate-mode);
}