.clickable-tab {
  background-color: color('white', 40);
  display: inline-block;
  padding: 0.8em 2em;
  font-size: 1em;
  border-left: 6px solid color('purple', 60);
  margin-top: 0rem;
  cursor: pointer;

  // clickable tabs when used as radio buttons
  .base--radio + & {
    border-left-color: transparent;
  }

  .base--radio:checked + & {
    border-left-color: color('purple', 60);
  }

  .base--radio + &::before {
    display: none;
  }
}