:global(.ui-tabs) {
  & :global(.tab) {
    &:hover {
      color: var(--primary-dark-text);
    }
    &:global(.active) {
      background-color: var(--white);
      border-color: var(--border-dark-02);
      & span {
        color: currentColor;
      }
    }
  }
  &[data-state~="primary"] {
    &[data-state~='group'] {
      color: var(--primary-color);
      & :global(.tab) {
        color: var(--primary-color);
        &:global(.active) {
          color: var(--primary-light-text);
          background-color: var(--primary-color);
        }
      }
    }
    &:not([data-state~='group']) {
      & :global(.tab) {
        &:global(.active) {
          color: var(--primary-color);
          &:hover {
            color: var(--primary-dark-color);
          }
        }
      }
    }
  }
  &[data-state~="secondary"] {
    &[data-state~='group'] {
      color: var(--secondary-color);
      & :global(.tab) {
        color: var(--secondary-color);
        &:global(.active) {
          color: var(--primary-light-text);
          background-color: var(--secondary-color);
        }
      }
    }
    &:not([data-state~='group']) {
      & :global(.tab) {
        &:global(.active) {
          color: var(--secondary-color);
          &:hover {
            color: var(--secondary-dark-color);
          }
        }
      }
    }
  }
  &[data-state~="accent"] {
    &[data-state~='group'] {
      color: var(--accent-color);
      & :global(.tab) {
        color: var(--accent-color);
        &:global(.active) {
          color: var(--primary-light-text);
          background-color: var(--accent-color);
        }
      }
    }
    &:not([data-state~='group']) {
      & :global(.tab) {
        &:global(.active) {
          color: var(--accent-color);
          &:hover {
            color: var(--accent-dark-color);
          }
        }
      }
    }
  }
  &[data-state~="triadic"] {
    &[data-state~='group'] {
      color: var(--triadic-color);
      & :global(.tab) {
        color: var(--triadic-color);
        &:global(.active) {
          color: var(--primary-light-text);
          background-color: var(--triadic-color);
        }
      }
    }
    &:not([data-state~='group']) {
      & :global(.tab) {
        &:global(.active) {
          color: var(--triadic-color);
          &:hover {
            color: var(--triadic-dark-color);
          }
        }
      }
    }
  }
  &[data-state~="split"] {
    &[data-state~='group'] {
      color: var(--split-color);
      & :global(.tab) {
        color: var(--split-color);
        &:global(.active) {
          color: var(--primary-light-text);
          background-color: var(--split-color);
        }
      }
    }
    &:not([data-state~='group']) {
      & :global(.tab) {
        &:global(.active) {
          color: var(--split-color);
          &:hover {
            color: var(--split-dark-color);
          }
        }
      }
    }
  }
  &[data-state~="gray"] {
    &[data-state~='group'] {
      color: var(--border-dark-03);
      & :global(.tab) {
        color: var(--secondary-dark-text);
        &:global(.active) {
          color: var(--primary-light-text);
          background-color: var(--border-dark-03);
        }
      }
    }
    &:not([data-state~='group']) {
      & :global(.tab) {
        color: var(--border-dark-03);
        &:global(.active) {
          color: var(--secondary-dark-text);
          &:after {
            color: var(--border-dark-03);
          }
          &:hover {
            color: var(--secondary-dark-text);
          }
        }
      }
    }
  }
  &[data-state~="dark"] {
    &[data-state~='group'] {
      color: var(--palette-dark-03);
      & :global(.tab) {
        color: var(--primary-dark-text);
        &:global(.active) {
          color: var(--primary-light-text);
          background-color: var(--palette-dark-03);
        }
      }
    }
    &:not([data-state~='group']) {
      & :global(.tab) {
        &:global(.active) {
          color: var(--primary-dark-text);
          &:hover {
            color: var(--secondary-dark-text);
          }
        }
      }
    }
  }
}