Core formatting example.css

/**
 * Example use of CSS nesting.
 *
 * @see https://developer.chrome.com/articles/css-nesting/
 */
.tabs__tab {
  display: none;
  margin: 0;
  margin-block-end: calc(-1 * var(--tabs-border-width));

  &.is-active {
    display: flex;
  }
  
  /* No ampersand required on child selector if it does not start with a letter. */
  .tabs__inner {
    outline: 0;
  }
  
  /* Ampersand required on child selector because it starts with a letter. */
  & a {
    display: block;
  }

  /* Show tabs when JavaScript disabled. */
  html:not(.js) & {
    display: flex;
  }

  /* Show tabs when tabs-expanded class is present. */
  .tabs.is-expanded & {
    display: flex;
  }
}