[data-component~="components/control"] {
  color: var(--color-primary-300);

      /* for span -- necessary? */
      /*cursor: pointer;
      &:hover {
        text-decoration: underline;
      }*/

      &[data-danger=true] {
        color: var(--color-red-400);
      }
      &[disabled] {
        color: var(--color-base-500);
        cursor: not-allowed;
      }
}