// Deprecated styles in Based.

// Build Helpers
//
// I'll be working towards removing all appearance classes
// like these from the codebase, via three methods:
//
// 1. Integrating the styles directly into the components they're applied to.
//
// 2. Reworking site-wide defaults so that these tweaks are no longer needed.
//
// 3. Converting these into mixins which we can use in the CSS, rather than
//    bloating the markup.
//
// -Josh

  @mixin build_helpers($x: "") {

    /* Alignment */
    .#{$x}align_left   {
      float: left !important;
    }

    .#{$x}align_center {
      float: none;
      margin-left: auto;
      margin-right: auto;
    }

    .#{$x}align_right {
      float: right !important;
    }

    .#{$x}align_none {
      float: none !important;
    }

    .#{$x}margin_tn {
      margin-top: 1rem !important;
    }

    .#{$x}margin_rn {
      margin-right: 1rem !important;
    }

    .#{$x}margin_bn {
      margin-bottom: 1rem !important;
    }

    .#{$x}margin_ln {
      margin-left: 1rem !important;
    }

    .#{$x}margin_th {
      margin-top: 0.5rem !important;
    }

    .#{$x}margin_rh {
      margin-right: 0.5rem !important;
    }

    .#{$x}margin_bh {
      margin-bottom: 0.5rem !important;
    }

    .#{$x}margin_lh {
      margin-left: 0.5rem !important;
    }

    .#{$x}margin_tq {
      margin-top: 0.25rem !important;
    }

    .#{$x}margin_rq {
      margin-right: 0.25rem !important;
    }

    .#{$x}margin_bq {
      margin-bottom: 0.25rem !important;
    }

    .#{$x}margin_lq {
      margin-left: 0.25rem !important;
    }

    .#{$x}margin_td {
      margin-top: 2rem !important;
    }

    .#{$x}margin_rd {
      margin-right: 2rem !important;
    }

    .#{$x}margin_bd {
      margin-bottom: 2rem !important;
    }

    .#{$x}margin_ld {
      margin-left: 2rem !important;
    }

    .#{$x}margin_none {
      margin: 0 !important;
    }

    /* Paddings */

    .#{$x}padding_top {
      padding-top: 1rem !important;
    }

    .#{$x}padding_right  {
      padding-right: 1rem !important;
    }

    .#{$x}padding_bottom {
      padding-bottom: 1rem !important;
    }

    .#{$x}padding_left {
      padding-left: 1rem !important;
    }

    .#{$x}padding_none {
      padding: 0 !important;
    }

    /* Text alignment */
    .#{$x}text_left {
      text-align: left !important;
    }

    .#{$x}text_center {
      text-align: center !important;
    }

    .#{$x}text_right {
      text-align: right !important;
    }

    .#{$x}text_justify {
      text-align: justify !important;
    }

    /* Font sizing */
    .#{$x}font_huge,
    .#{$x}font_xxl,
    .#{$x}font_xl,
    .#{$x}font_large,
    .#{$x}font_medium,
    .#{$x}font_normal,
    .#{$x}font_smaller,
    .#{$x}font_small {
      color: inherit;
      font-weight: inherit;
    }

    .#{$x}font_huge,
    .#{$x}font_xxl {
      line-height: 1.333 !important;
    }

    .#{$x}font_huge   {
      font-size: 4.209rem !important;
    }

    .#{$x}font_xxl  {
      font-size: 3.157rem !important;
    }

    .#{$x}font_xl   {
      font-size: 2.369rem !important;
    }

    .#{$x}font_large  {
      font-size: 1.777rem !important;
    }

    .#{$x}font_medium {
      font-size: 1.333rem !important;
    }

    .#{$x}font_normal {
      font-size: 1rem !important;
    }

    .#{$x}font_smaller {
      font-size: 0.9rem !important;
    }

    .#{$x}font_small {
      font-size: 0.8rem !important;
    }

    /* Font styles */
    .#{$x}font_thin {
      font-weight: 300;
    }

    .#{$x}weight_normal {
      font-weight: normal;
    }

    .#{$x}font_muted {
      color: $darkerGray;
    }

    @if $x == "" {
        .desk_show, .lap_show, .desk_show_i, .lap_show_i, .desk_show_ib, .lap_show_ib {
          display: none !important;
        }
      } @else {
      .#{$x}hide {
        display: none !important;
      }

      .#{$x}show {
        display: block !important;
      }

      .#{$x}show_i {
        display: inline !important;
      }

      .#{$x}show_ib {
        display: inline-block !important;
      }

      th.#{$x}show, td.#{$x}show {
        display: table-cell !important;
      }
    }
  }

  @include build_helpers();

  @media only screen and (min-width: 640px) {
    @include build_helpers(lap_);
  }

  @media only screen and (min-width: 960px) {
    @include build_helpers(desk_);
  }

  .none {
    color: $darkGray;
  }
  .yes {
    color: $successColor;
  }
  .no {
    color: $errorColor;
  }

  // Hide from screen readers and browsers
  .hidden {
    display: none;
    visibility: hidden;
  }

  // Visually hidden, available for screen readers - http://cbrac.co/TUcUgH
  .visuallyhidden {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    margin: -1px;
    padding: 0;
    width: 1px;
    height: 1px;
    border: 0;
    // Add keyboard navigation - http://cbrac.co/RR8gO6
    &.focusable {
      &:active,
      &:focus {
        position: static;
        overflow: visible;
        clip: auto;
        margin: 0;
        width: auto;
        height: auto;
      }
    }
  }

  .cf {
    @include cf();
  }