// =========================================================
// Tabs (desktop)
// =========================================================

.app-tabs {
  margin: -1px auto;
  padding: 0;
  overflow: visible;
  list-style-type: none;
  border-top: 1px solid $govuk-border-colour;

  @include govuk-media-query($until: desktop) {
    display: none;
  }

  .app-prose-scope & {
    // A specific selector to reset .app-prose-scope ul
    margin-bottom: 0;
    padding: 0;
    font-size: 0; // Prevent white space taking up space between tabs
  }
}

.app-tabs__item {
  @include govuk-font-size($size: 19);
  display: inline-block;
  position: relative;
  padding: govuk-spacing(4);

  a {
    display: block;

    .app-prose-scope &:visited {
      color: $govuk-link-colour;
    }

    .app-prose-scope &:focus {
      color: $govuk-focus-text-colour;
    }

    // Extend the touch area of the <a> to fill the entire tab
    &::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
  }

  // A specific selector to reset .app-prose-scope ul li
  .app-prose-scope & {
    margin: 0;
  }
}

.app-tabs__item--current {
  border-right: 1px solid $govuk-border-colour;
  border-left: 1px solid $govuk-border-colour;
  background: govuk-colour("white");

  // Offset the added borders
  .app-prose-scope & {
    margin: 0 -1px;
  }

  // No left hand border is required for the first tab, as it would just double
  // up the border of its parent
  &:first-child {
    border-left: 0;

    .app-prose-scope & {
      margin-left: 0;
    }
  }

  a {
    .app-prose-scope & {
      color: $govuk-text-colour;
      @include govuk-link-style-no-underline;
    }
  }
}

// =========================================================
// 'Accordion' (mobile and tablet)
// =========================================================

.app-tabs__heading {
  display: none;
  position: relative;
  padding: govuk-spacing(3);
  border-top: 1px solid $govuk-border-colour;

  @include govuk-media-query($until: desktop) {
    display: block;
  }

  .app-tabs__heading-button {
    @include govuk-link-common;
    @include govuk-link-decoration;
    @include govuk-font-size($size: 19);

    border: 0;
    outline: 0;
    color: $govuk-link-colour;
    background: none;
  }

  .app-tabs__heading-link,
  .app-tabs__heading-button {
    // Extend the touch area of the <a> to fill the entire heading
    &::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }

    .app-prose-scope &:visited {
      color: $govuk-link-colour;
    }

    .app-prose-scope &:focus {
      color: $govuk-focus-text-colour;
    }
  }
}

.app-tabs__heading--current {
  border-bottom: 0;

  a {
    @include govuk-link-style-no-underline;
  }
}

// =========================================================
// Code blocks
// =========================================================

.app-tabs__container {
  padding: 20px;
  border-top: 1px solid $govuk-border-colour;
  background-color: govuk-colour("white");

  // When used for tabs, position to underlap tabs
  @include govuk-media-query($from: desktop) {
    margin-top: -1px;
  }
}

.app-tabs__container pre code {
  outline: 1px solid transparent;
  color: $govuk-text-colour;
  background-color: govuk-colour("light-grey");
}
