webawesome/source/css/tabs.css

/*! Tabs */

.tabs {
  width: 100%;
  margin-bottom: 1.5rem;

  & .tabs-nav {
    margin-bottom: 1.5rem;
    user-select: none;

    & a {
      color: var(--tab-color);
      text-decoration: none;
      background-color: var(--tab-bg-color);
      border-radius: var(--tab-border-radius);
      padding: var(--tab-padding-y) var(--tab-padding-x);
      display: inline-block;
      transition: var(--tab-speed) box-shadow;

      &:hover {
        color: var(--tab-color-hover);
        background-color: var(--tab-bg-color-hover);
        text-decoration: none;
      }

      &:focus {
        outline: none;

        &:not(.disabled) {
          box-shadow: 0 0 0 var(--tab-focus-width) color(var(--tab-bg-color-active) alpha(50%));

          /* Force a new stacking context so focus rings don't get truncated by adjacent elements */
          transform: translateZ(0);
        }
      }

      &.active {
        color: var(--tab-color-active);
        background-color: var(--tab-bg-color-active);
        cursor: default;
      }

      &.disabled {
        color: var(--tab-color-disabled);
        background-color: var(--tab-bg-color-disabled);
        cursor: not-allowed;
      }
    }
  }

  & .tabs-pane {
    border: solid var(--tab-pane-border-width) var(--tab-pane-border-color);
    border-radius: .25rem;
    padding: var(--tab-pane-padding-y) var(--tab-pane-padding-x);

    &:not(.active) {
      display: none;
    }

    & > :last-child {
      margin-bottom: 0;
    }
  }
}