@import "../../base";

@include govuk-exports("govuk/component/tabs") {
  .govuk-tabs {
    @include govuk-responsive-margin(1, "top");
    @include govuk-responsive-margin(6, "bottom");
    @include govuk-font($size: 19);
  }

  .govuk-tabs__title {
    // Set the size and weight again because this element is a heading and the
    // user agent font size overrides the inherited font size
    @include govuk-font-size($size: 19);
    @include govuk-typography-weight-regular;

    margin-bottom: govuk-spacing(2);
    color: govuk-functional-colour(text);
  }

  .govuk-tabs__list {
    margin: 0;
    padding: 0;
    list-style: none;
    @include govuk-responsive-margin(6, "bottom");
  }

  .govuk-tabs__list-item {
    margin-left: govuk-spacing(5);

    &::before {
      content: "\2014 "; // "— "
      margin-left: govuk-spacing(-5);
      padding-right: govuk-spacing(1);
      color: govuk-functional-colour(text);
    }
  }

  .govuk-tabs__tab {
    @include govuk-link-common;
    @include govuk-link-style-default;

    display: inline-block;
    margin-bottom: govuk-spacing(2);
  }

  .govuk-tabs__panel {
    @include govuk-responsive-margin(8, "bottom");
  }

  // GOV.UK Frontend JavaScript enabled
  .govuk-frontend-supported {
    @media #{govuk-from-breakpoint(tablet)} {
      .govuk-tabs__list {
        @include govuk-clearfix;
        margin-bottom: 0;
        border-bottom: 1px solid;
        border-bottom-color: govuk-functional-colour(border);
      }

      .govuk-tabs__title {
        display: none;
      }

      .govuk-tabs__list-item {
        position: relative;

        margin-right: govuk-spacing(1);
        margin-bottom: 0;
        margin-left: 0;
        padding: govuk-spacing(2) govuk-spacing(4);

        float: left;
        background-color: govuk-colour("black", $variant: "tint-95");
        text-align: center;

        &::before {
          content: none;
        }
      }

      .govuk-tabs__list-item--selected {
        $border-width: 1px;

        position: relative;

        margin-top: govuk-spacing(-1);

        // Compensation for border (otherwise we get a shift)
        margin-bottom: -$border-width;
        padding-top: govuk-spacing(3) - $border-width;
        padding-right: govuk-spacing(4) - $border-width;
        padding-bottom: govuk-spacing(3) + $border-width;
        padding-left: govuk-spacing(4) - $border-width;

        border: $border-width solid;
        border-bottom: 0;
        border-color: govuk-functional-colour(border);

        background-color: govuk-functional-colour(body-background);

        .govuk-tabs__tab {
          text-decoration: none;
        }
      }

      .govuk-tabs__tab {
        @include govuk-link-style-text;

        margin-bottom: 0;

        &::after {
          content: "";
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
        }
      }

      .govuk-tabs__panel {
        @include govuk-responsive-margin(0, "bottom");
        padding: govuk-spacing(6) govuk-spacing(4);
        border: 1px solid;
        border-top: 0;
        border-color: govuk-functional-colour(border);

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

      .govuk-tabs__panel--hidden {
        display: none;
      }
    }
  }
}

/*# sourceMappingURL=_index.scss.map */