:root {
  --tabs-padding: 4px 14px 11px 14px;
  --border-bottomHeight: 4px;
  --border-topRadius:  var(--border-radius) var(--border-radius) 0 0;
}

.Tabs-tabList {
  display: flex;
  justify-content: center;

  padding: 0;
  margin: 0;
  list-style: none;

  font-size: var(--font-size);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);
}

.Tabs-tablistItem {
  position: relative;
}

.Tabs-tab {
  padding: var(--tabs-padding);

  cursor: pointer;

  &.is-active {
    cursor: default;
  }

  &:after {
    content: '';
    border-radius: var(--border-topRadius);
    display: block;
    position: absolute;
    height: var(--border-bottomHeight);
    bottom: 0;
    left: 0;
    right: 0;
    color: var(--color-brand-500);
  
    transition: 0.3s all;
    background-color: transparent;
  }
  &:focus {
    outline: none; /* TODO we need :focus designs for light and dark variantss */
  }
}

.Tabs--dark {
  & .Tabs-tab {
    color: var(--color-neutral-700);
    font-weight: var(--font-weight-bold);
    
    &.is-active {
      color: var(--color-brand-500);
      font-weight: var(--font-weight-bold);

      &:after {
        background-color: var(--color-brand-500);
      }
    }

    &.is-inactive {
      &:hover {
        &:after {
          background-color: var(--color-neutral-300);
        }
      }
    }
  }
}

.Tabs--light  {
  & .Tabs-tab {
    color: var(--color-white);
    opacity: 80%;
    font-weight: var(--font-weight-bold);
    
    &.is-active {
      color: var(--color-white);
      font-weight: var(--font-weight-bold);

      &:after {
        background-color: var(--color-white);
      }
    }

    &.is-inactive {
      &:hover {
        &:after {
          background-color: var(--color-neutral-300);
        }
      }
    }
  } 
}