@import 'node_modules/govuk_frontend_toolkit/stylesheets/_colours.scss';
@import 'node_modules/govuk_frontend_toolkit/stylesheets/_conditionals.scss';

/*
Tabs
*/

$module: "tabs";

.#{$module} {

  // global treatment
  &-toggle {
    display: block;
    padding-right: 15px;
    padding-left: 15px;
    padding-top: 10px;
    padding-bottom: 3px;
    margin-bottom: 8px;

    &[aria-selected=true] {
      color: $text-colour;
      text-decoration: none;
      border-bottom: none;
    }

    a {
      color: #005ea5;
    }
  }

  // mobile
  @include media (mobile) {
    &-list {
      border-bottom: 1px solid $border-colour;
      margin-left: - 15px;
      margin-right: - 15px;
    }

    &-toggle {
      border-top: 1px solid $border-colour;

      &:focus {
        color: $text-colour;
        outline: none;
      }
    }
  }

  // tablet and above
  @include media(tablet) {
    &-panel {
      border-top: 1px solid $border-colour;
      clear: both;
      overflow: hidden;
    }

    &-list {
      float: left;

      &-item {
        float: left;
        position: relative; bottom: -1px;
        padding-top: 10px;
      }
    }

    &-toggle {
      background-color: $grey-3;
      border: 1px solid transparent;
      float: left;
      margin-top: 0px;
      margin-bottom: 0px;
      margin-right: 6px;
      margin-left: 0px;
      text-decoration: none;

      &:visited {
        color: #005ea5;
      }

      &-selected,
      &[aria-selected=true] {
        background-color: $white;
        border-bottom: 0px;
        border-color: $grey-2;
        padding-bottom: 11px;
        margin-bottom: 0px;
        color: $text-colour;
      }
    }
  }
}