_tabs.scss

// Tabbed block container
.sd-tab-set {
  border-radius: 0.125rem;
  display: flex;
  flex-wrap: wrap;
  margin: 1em 0;
  position: relative;

  // Hide radio buttons
  > input {
    opacity: 0;
    position: absolute;

    // Active tab label
    &:checked + label {
      border-color: var(--sd-color-tabs-underline-active);
      color: var(--sd-color-tabs-label-active);

      // Show tabbed block content
      + .sd-tab-content {
        display: block;
      }
    }

    &:not(:checked) + label:hover {
      color: var(--sd-color-tabs-label-hover);
      border-color: var(--sd-color-tabs-underline-hover);
    }

    // Focused tab label
    &:focus + label {
      outline-style: auto;
    }

    // Disable focus indicator for pointer devices
    &:not(.focus-visible) + label {
      outline: none;
      -webkit-tap-highlight-color: transparent;
    }
  }

  // Tab label
  > label {
    border-bottom: 0.125rem solid transparent;
    margin-bottom: 0;
    color: var(--sd-color-tabs-label-inactive);
    border-color: var(--sd-color-tabs-underline-inactive);
    cursor: pointer;
    font-size: var(--sd-fontsize-tabs-label);
    font-weight: 700;
    padding: 1em 1.25em 0.5em;
    transition: color 250ms;
    width: auto;
    z-index: 1;

    // Hovered label
    html &:hover {
      color: var(--sd-color-tabs-label-active);
    }
  }
}

.sd-col > .sd-tab-set {
  width: 100%;
}

// Tabbed block content
.sd-tab-content {
  box-shadow: 0 -0.0625rem var(--sd-color-tabs-overline),
    0 0.0625rem var(--sd-color-tabs-underline);
  display: none;
  order: 99;
  padding-bottom: 0.75rem;
  padding-top: 0.75rem;
  width: 100%;

  > :first-child {
    margin-top: 0 !important;
  }

  > :last-child {
    margin-bottom: 0 !important;
  }

  // Nested tabs
  > .sd-tab-set {
    margin: 0;
  }
}