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

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

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

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

  .govuk-tabs__list {
    margin: 0;
    padding: 0;
    list-style: none;
    @include mq($until: tablet) {
      @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);
    }
  }

  .govuk-tabs__tab {
    @include govuk-link-common;
    @include govuk-link-style-default;
    @include govuk-font($size: 19);

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

    &[aria-current = "true"] {
      color: govuk-colour("black");
      text-decoration: none;
    }
  }

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

  // JavaScript enabled
  .js-enabled {

    @include mq($from: tablet) {

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

      .govuk-tabs__list-item {
        margin-left: 0;

        &::before {
          content: none;
        }
      }

      .govuk-tabs__title {
        display: none;
      }

      .govuk-tabs__tab {
        margin-right: govuk-spacing(1);
        padding-right: govuk-spacing(4);
        padding-left: govuk-spacing(4);
        float: left;
        color: govuk-colour("black");
        background-color: govuk-colour("grey-4");
        text-align: center;
        text-decoration: none;

        &--selected {
          margin-top: - govuk-spacing(1);
          margin-bottom: -1px;

          // 1px is compensation for border (otherwise we get a 1px shift)
          padding-top: govuk-spacing(3) - 1px;
          padding-right: govuk-spacing(4) - 1px;
          padding-bottom: govuk-spacing(3) + 1px;
          padding-left: govuk-spacing(4) - 1px;

          border: 1px solid $govuk-border-colour;
          border-bottom: 0;
          color: govuk-colour("black");
          background-color: govuk-colour("white");

          &:focus {
            background-color: transparent;
          }
        }
      }

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

        &--hidden {
          display: none;
        }

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

  }
}