.tabbed-content {
  $component-name: '.tabbed-content';

  &__section {
    @include content-container;

    &:focus {
      outline: none;
    }
  }

  & > .nav {
    margin-bottom: spacing(-1);
  }

  & > .switch {
    margin-bottom: spacing(-3);
  }

  .nav__items[hidden] {
    display: none;
  }

  .nav button.tabbed-content__expand-all {
    margin-left: auto;
  }

  &--hide-tabs-on-medium-width {
    @include breakpoint("medium") {
      #{$component-name}__section {
        padding-top: 0;
      }

      > .nav {
        display: none;
      }
    }
  }

  &--hide-tabs-on-wide-width {
    @include breakpoint("wide") {
      #{$component-name}__section {
        padding-top: 0;
      }

      > .nav {
        display: none;
      }
    }
  }

  &-peripheral:not(#{$component-name}-peripheral--active) {
    display: none;
  }

  .page__content__block--no-padding & {
    margin-left: 0;
    margin-right: 0;

    & > .nav,
    & > .switch {
      margin-left: spacing($page-padding-side);
      margin-right: spacing($page-padding-side);
    }
  }
}