.category-tab {
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: var(--Category-Tabs-Height, 40px);
  padding: 0 var(--Category-Tabs-Horizontal-Padding, 16px);
  gap: var(--Category-Tabs-Gap, 8px);
  flex-shrink: 0;
  border-radius: var(--Category-Tabs-Radius);
  border: var(--Category-Tabs-Border-Width) solid var(--Category-Tabs-Default-Border);
  background-color: var(--Category-Tabs-Default-Background);
  color: var(--Category-Tabs-Default-Text);
  font: var(--Body-Small-Medium);
  transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out;

  & .category-tab-icon {
    display: flex;
    width: var(--Icon-S, 1.25rem);
    height: var(--Icon-S, 1.25rem);
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    color: var(--Category-Tabs-Default-Icon);

    & .category-tab-icon-svg {
      width: var(--Icon-S, 1.25rem);
      height: var(--Icon-S, 1.25rem);
      flex-shrink: 0;
      aspect-ratio: 1/1;
      fill: currentcolor;
    }

    & picture {
      width: var(--Icon-S, 1.25rem);
      height: var(--Icon-S, 1.25rem);
      flex-shrink: 0;
      aspect-ratio: 1/1;

      & .category-tab-icon-img {
        width: var(--Icon-S, 1.25rem);
        height: var(--Icon-S, 1.25rem);
        flex-shrink: 0;
        aspect-ratio: 1/1;
      }
    }
  }

  .icon {
    color: var(--Category-Tabs-Default-Icon);
  }

  &.selected {
    background-color: var(--Category-Tabs-Selected-Background);
    border-color: var(--Category-Tabs-Selected-Border);
    color: var(--Category-Tabs-Selected-Text);

    .icon {
      color: var(--Category-Tabs-Selected-Icon);
    }

    & .category-tab-icon {
      color: var(--Category-Tabs-Selected-Icon);
    }
  }

  &:disabled {
    cursor: not-allowed;
  }
}

/* stylelint-disable-next-line selector-class-pattern */
.tpd-preventivatore__category-tabs .category-tab {
  height: var(--Category-Tabs-Quote-Tool-Height);
  padding: 0 var(--Category-Tabs-Quote-Tool-Horizontal-Padding-Deselected);
  border-radius: var(--Category-Tabs-Quote-Tool-Radius);
  border: var(--Category-Tabs-Quote-Tool-Border-Width) solid var(--Category-Tabs-Quote-Tool-Default-Border);
  background: var(--Category-Tabs-Quote-Tool-Default-Background);

  &.selected {
    border-color: var(--Category-Tabs-Quote-Tool-Selected-Border);
    background: var(--Category-Tabs-Quote-Tool-Selected-Background);
  }
}