.docs-tab-list {
  font-size: .875rem;
  font-weight: 500;
  border-block-end: 1px solid var(--senary-contrast);
}

.docs-tab {
  padding: 1rem;
  position: relative;
  background-color: var(--quaternary-contrast);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  transition: background-color 0.3s ease;

  &::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--primary-contrast);
    opacity: 0;
    transform: scaleX(0.7);
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  &:hover {
    background-color: var(--primary-contrast);
    &::before {
      opacity: 0.3;
    }
  }

  &.docs-tab-active {
    // font gradient
    background-image: var(--pink-to-purple-vertical-gradient);

    &::before {
      opacity: 1;
      transform: scaleX(1);
      background: var(--pink-to-purple-vertical-gradient);
    }

    &:hover {
      &::before {
        opacity: 1;
        transform: scaleX(1.1);
      }
    }
  }
}

.docs-tab-panel {
  padding-top: 1rem;
}