@import "common";
@import "../compass/css3/border-radius";

// Tab structure
.tabs {
  border-bottom: rem-calc(2) solid $clouds;
  margin: 0;
  padding: 0;

  &.profiletabs { padding-top: rem-calc(2); }

  dd {
    &:last-child { border-right: none; }

    margin-bottom: -1px !important;

    a {
      background-color: transparent;
      color: $concrete;
      font: {
        size: rem-calc(14);
        weight: $normal;
      }
      line-height: rem-calc(15);
      padding: rem-calc(15 30);
      text-align: center;

      &:hover {
        background-color: transparent;
        color: $silver;
      }

      .has-tip {
        border-bottom: none;
        color: $concrete;
        font: {
          size: rem-calc(14);
          weight: $normal;
        }
      }
    }

    &.active {

      a {
        background-color: white;
        border-top: rem-calc(2) solid $clouds;
        border-right: rem-calc(2) solid $clouds;
        border-left: rem-calc(2) solid $clouds;
        @include border-top-radius(rem-calc(5));
        color: $primary_blue;
        font-weight: $bold;
        line-height: rem-calc(10);
        padding-bottom: rem-calc(19);
        margin-bottom: rem-calc(-1);

        .has-tip {
          border-bottom: none;
          color: $primary_blue;
          font: {
            size: rem-calc(14);
            weight: $bold;
          }
        }
      }
    }
  }

  @media #{$small-down} {
    dd a {
      font-size: 60%;
      padding: rem-calc(8 7 0 7);
    }
  }

  @media #{$medium-only} {
    dd a {
      font-size: 80%;
      padding: rem-calc(14 12 10 12);
    }
  }

  @media #{$large-only} {
    dd a {
      font-size: 80%;
      padding: rem-calc(14 12 10 12);
    }
  }
}
