@import "../../settings/all";
@import "../../tools/all";
@import "../../helpers/all";

@include govuk-exports("govuk/component/tabs") {

  .govuk-tabs {
    @include govuk-responsive-margin(1, "top");
    @include govuk-responsive-margin(6, "bottom");
  }

  .govuk-tabs__title {
    @include govuk-font($size: 19);
    @include govuk-text-colour;
    margin-bottom: govuk-spacing(2);
  }

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

  .govuk-tabs__list-item {
    @include govuk-font($size: 19);
    margin-left: govuk-spacing(5);

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

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

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

    // Focus state for mobile and when JavaScript is disabled
    // It is removed for JS-enabled desktop styles
    &:focus {
      @include govuk-focused-text;
    }
  }

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

  // JavaScript enabled
  .js-enabled {

    @include govuk-media-query($from: tablet) {

      .govuk-tabs__list {
        @include govuk-clearfix;
        margin-bottom: 0;
        border-bottom: 1px solid $govuk-border-colour;
      }

      .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("light-grey", $legacy: "grey-4");
        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 $govuk-border-colour;
        border-bottom: 0;

        background-color: $govuk-body-background-colour;

        .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 $govuk-border-colour;
        border-top: 0;

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

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

  }
}