.picmo-picker .categoryButtonsContainer {
  overflow: auto;
  padding: 2px 0;
  scrollbar-width: thin;

  &.has-overflow-right {
    mask-image: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 10%);
    -webkit-mask-image: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 10%);
  }

  &.has-overflow-left {
    mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 10%);
    -webkit-mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 10%);
  }

  &.has-overflow-both {
    mask-image: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 1) 10%,
      rgba(255, 255, 255, 1) 90%,
      rgba(255, 255, 255, 0) 100%
    );

    -webkit-mask-image: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 1) 10%,
      rgba(255, 255, 255, 1) 90%,
      rgba(255, 255, 255, 0) 100%
    );
  }

  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  &::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color);
    border-radius: 1em;
  }
}

.picmo-picker .categoryButtons {
  display: flex;
  flex-direction: row;
  gap: var(--tab-gap);
  margin: 0;
  padding: 0 0.5em;
  align-items: center;
  height: var(--category-tabs-height);
  box-sizing: border-box;
  width: 100%;
  justify-content: space-between;
  position: relative;

  list-style-type: none;
  justify-self: center;
  max-width: min(calc(8 * 2rem * 1.3 + 2.75rem), calc(var(--category-count, 1) * 2.5rem));

  & .categoryTab {
    display: flex;
    align-items: center;
    transition: all 100ms;
    width: 2em;

    &.categoryTabActive {
      & .categoryButton {
        color: var(--category-tab-active-color);
        background: linear-gradient(rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.75) 100%),
          linear-gradient(var(--category-tab-active-color) 0%, var(--category-tab-active-color) 100%);

        border: 2px solid var(--category-tab-active-color);

        &:hover {
          background-color: var(--category-tab-active-background-color);
        }
      }
    }

    & button.categoryButton {
      border-radius: 5px;
      background: transparent;
      border: 2px solid transparent;
      color: var(--category-tab-color);
      cursor: pointer;
      padding: 2px;
      vertical-align: middle;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      width: 1.6em;
      height: 1.6em;
      transition: all 100ms;

      &img {
        width: var(--category-tab-size);
        height: var(--category-tab-size);
      }

      &:hover {
        background: var(--category-tab-highlight-background-color);
      }
    }
  }
}
