//
// @file
// Invisible classes to initiate commone design patterns.
//

// Tabbed interfaces.
%tabs-primary,
%tabs-secondary {
  [dir] & {
    padding: {
      right: 0;
      left: 0;
    };
  }

  &,
  li {
    list-style-type: none;
  }

  li {
    display: inline-block;
    margin: {
      top: 0;
      bottom: 0;
    }

    [dir="ltr"] & {
      margin-right: $rhythm-space;

      &:last-child {
        margin-right: 0;
      }
    }

    [dir="rtl"] & {
      margin-left: $rhythm-space;

      &:last-child {
        margin-left: 0;
      }
    }
  }

  a {
    display: inline-block;
    text-decoration: none;

    &,
    &:link,
    &:visited {
      color: $color-text-light;
    }

    &:active,
    &.active,
    &:hover {
      color: $color-text;
    }

    &:hover {
      text-decoration: none;
    }
  }
}

%tabs-primary {
  li {
    border-bottom: $rhythm-space-short solid transparent;
    @include single-transition(border-color, .2s);
  }

  > [class*="active"],
  > :hover {
    border-color: $color-link-alternate;

    a {
      color: $color-text;
    }
  }

  a {
    padding: $rhythm-space-short 0;
    font: {
      size: ms(1);
      weight: $font-light;
    }
  }
}

%tabs-secondary {
  margin-top: -($rhythm-space + $rhythm-space-short);
  padding-top: $rhythm-space;

  a {
    font-weight: $font-bold;
  }
}

// Collapsible elements
%collapsible-expanded,
%collapsible-collapsed {
  &:before {
    position: relative;
    display: inline-block;
    content: '\2303';
    color: $color-link-alternate;
    @include transition(top .2s, transform .2s);
  }
}

%collapsible-expanded {
  &:before {
    top: (($line-height - 1em) / 2);
  }

  html.js[dir="ltr"] & {
    &:before {
      margin-right: $rhythm-space-short;
    }
  }
}

%collapsible-collapsed {
  &:before {
    top: -(($line-height - 1em) / 2);
    @include scaleY(-1);
  }

  html.js[dir="rtl"] & {
    &:before {
      margin-left: $rhythm-space-short;
    }
  }
}
