.view-teams {

  // resets for existing styles
  div.course-wrapper section.course-content {
    padding: 0;

    p {
      margin-bottom: ($baseline/4);
    }
  }

  p, span {
    color: inherit;
    font-weight: inherit;
  }

  .icon {
    font-family: "FontAwesome";
    color: inherit;
  }

  %button-reset {
    box-shadow: none;
    border: none;
    background-image: none;
    background-color: transparent;
    font-weight: normal;
  }

// layout
  .page-header {
    @include clearfix();
    border-bottom: 1px solid $gray-l3;
    padding: $baseline $baseline ($baseline/2) $baseline;

    .page-title {
      @extend %t-title4;
      margin-bottom: ($baseline/4);
      text-transform: none;
      color: $black;
    }

    .page-description {
      @extend %t-copy-sub1;
      margin-bottom: ($baseline/4);
      color: $gray;
    }
  }

  .page-header.has-secondary {

      .page-header-main {
        display: inline-block;
        width: flex-grid(8,12);
      }

      .page-header-secondary {
        display: inline-block;
        width: flex-grid(4,12);
        @include text-align(right);
      }
  }

// ui bits
  .breadcrumbs {
    @extend %t-copy-sub1;

    .nav-item {
      @include margin-right($baseline/2);
      display: inline-block;
    }

    .icon {
      @include margin-right($baseline/4);
      display: inline-block;
      color: $gray-l2;

      @include rtl {
        @include transform(rotateY(180deg));
      }
    }
  }

  .page-header-search {

    .search-label {
        @extend %text-sr;
    }

    .search-field {
        transition: all $tmg-f2 ease-in-out;
        border: 0;
        border-bottom: 2px solid transparent;
        padding: ($baseline/4) ($baseline/2);
        font-family: inherit;
        color: $gray;
        @include text-align(right);

        &:focus {
          border-bottom: 2px solid $black;
          color: $black;
        }
    }

    .action-search {
      @extend %button-reset;
      padding: ($baseline/4) ($baseline/2);


      .icon {
          color: $gray-l3;
      }

      // STATE: hover and focus
      &:hover,
      &:focus {

        .icon {
            color: $black;
        }
      }
    }
  }

// main content bits
  .page-content {
    padding: $baseline;
  }

  .page-content-nav {
    margin-bottom: $baseline;
    border-bottom: 3px solid $gray-l5;

    .nav-item {
        display: inline-block;
        margin-bottom: -3px; // to match the border
        border-bottom: 3px solid $gray-l5;
        padding: ($baseline*.75);
        color: $gray-d2;

        &.is-active {
            border-bottom: 3px solid $gray-d2;
            color: $gray-d2;
        }

        // STATE: hover and focus
        &:hover,
        &:focus {
            border-bottom: 3px solid $link-color;
            color: $link-color;
        }
    }
  }

  .intro {
    @extend %t-weight4;
  }

  .listing-tools {
    @extend %t-copy-sub1;
    margin: ($baseline/10) $baseline;
    color: $gray-l1;

    label { // override
      color: inherit;
      font-size: inherit;
    }

    .listing-sort-select {
      @extend %t-copy-sub1;
      @extend %t-regular;
      border: 0;
    }
  }

  // reset general ul styles
  .cards-list {
    margin: 0;
    padding: 0;
  }

  .card {
    @include clearfix();
    transition: all $tmg-f2 ease-in-out;
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 30%; // TODO: susy grid
    margin: ($baseline) 1.2%;
    border: 1px solid $gray-l4;
    border-bottom: 2px solid $gray-l3;
    border-radius: 3px;
    background-color: $white;
    color: $black;

    // STATE: hover, active, and focus
    &:hover,
    &:active,
    &:focus {
      box-shadow: 0 0 5px 1px $m-blue-t1;

      .card-description {
        color: $base-font-color;
      }
    }

    .wrapper-card-core {
      @include clearfix();
      padding: ($baseline);
    }

    .card-type {
      @extend %t-copy-sub2;
      text-transform: uppercase;
      color: $gray;
    }

    .card-title {
      @extend %t-title5;
      @extend %t-strong;
      margin-bottom: rem(.5);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .card-description {
      @extend %t-copy-sub1;
      color: $gray;
    }

    .card-actions {
      @include clearfix();

      .action-view {
        @extend %btn-pl-default-base;
        @include float(right);
        margin: ($baseline/4) 0;
      }
    }

    .wrapper-card-meta {
      @include clearfix();
      @extend %t-copy-sub1;
      padding: ($baseline/2) $baseline;
      background-color: $gray-l5;
      color: $gray;

      .meta-detail {
        margin-top: ($baseline/4);
        @include margin-right ($baseline*.75);
        color: $gray;

        .icon {
          @include margin-right ($baseline/4);
        }
      }

      .list-member-thumbs {
        @extend %ui-no-list;
        display: inline-block;
        vertical-align: text-bottom;

        .item-member-thumb {
          display: inline-block;
        }

        img {
          width: $baseline;
          height: $baseline;
          margin: 0 ($baseline/4);
        }
      }
    }

    &.square-card {

      .card-description { // replace with js or char limit
        height: 4rem;
        overflow: hidden;
      }

      .wrapper-card-meta {

        &.has-actions {
          .card-meta,
          .card-actions {
            display: inline-block;
            width: 48%; // TODO: susy grid
            vertical-align: middle;
          }
        }
      }
    }

    &.list-card {
      width: auto;
      display: block;

      .card-core {
        display: inline-block;
        vertical-align: middle;
        width: 84%; // TODO: susy grid
      }

      .card-meta {
        @include clearfix();
      }

      .meta-detail {
        display: inline-block;
      }

      .team-activity {
        @include float(right);
      }

      .card-actions {
        display: inline-block;
        vertical-align: middle;
        width: 15%; // TODO: susy grid
      }
    }

    &.has-pennant {

      .wrapper-card-core {
        padding-top: ($baseline*2);
      }

      .pennant {
        @extend %t-copy-sub2;
        @extend %t-strong;
        display: block;
        position: absolute;
        top: ($baseline/2);
        @include left(-($baseline/4));
        box-shadow: 1px 1px 1px 0 $blue-d1;
        background-color: $m-blue-l2;
        padding: ($baseline/10) ($baseline*.75);
        text-transform: uppercase;
        color: $white;
      }
    }

    &.is-unavailable {
      background-color: $gray-l5;

      .wrapper-card-meta {
        background-color: $gray-l4;
      }
    }
  }

  .team-profile {

    .page-content-main {
      display: inline-block;
      width: flex-grid(8, 12);
      vertical-align: top;

      .forum-new-post-form,
      .edit-post-form {
        min-width: 700px;
      }
    }

    .page-content-secondary {
      display: inline-block;
      width: flex-grid(4,12);
      @include margin-left($baseline * 0.75);
      margin-bottom: $baseline;

      @extend %t-copy-sub1;
      color: $gray-l1;

      div, .team-detail-header {
        margin-bottom: ($baseline/4);
      }

      .image-url {
        border: 2px solid $outer-border-color;
        border-radius: ($baseline/4);
        margin-bottom: ($baseline/4);
      }

      .leave-team {
        margin-bottom: $baseline;
        margin-top: ($baseline/2);
      }

      .invite-header, .invite-text {
        margin-bottom: ($baseline/2);
      }

      .invite-team {
        margin-top: ($baseline);
        margin-bottom: ($baseline/2);
      }
      .invite-link-input {
        width: 100%;
      }

      .member-profile {
        position: relative;
        display: inline-block;

        @include tooltip-hover-style(-($baseline*2));
        }
      }
  }

  .create-team {

    legend {
        @extend %t-title6;
        @extend %t-weight4;
        margin-bottom: ($baseline/4);
    }

    .description {
        @extend %t-copy-sub1;
        margin-bottom: ($baseline/2);
        color: $gray-l1;
    }

    .form-field {
        margin: 0 0 ($baseline*0.75) 0;

        .label {
            display: block;
            margin-bottom: ($baseline/4);
        }

        &.is-required {
            @extend %t-weight4;

            .label:after {
              @include margin-left($baseline/4);
              content: "*";
            }
        }

        .input-text {
            @extend %t-copy-base;
            transition: all $tmg-f2 ease-in-out 0s;
            display: block;
            width: 90%;
            height: 100%;
            margin-bottom: ($baseline/4);
            border: 1px solid $gray-l2;
            padding: ($baseline/2);
        }

        .input-select {
            @extend %t-copy-base;
            width: 90%;
            margin-bottom: ($baseline/4);
            border: 1px solid $gray-l2;
        }

        .input-text,
        .input-select {

            &:focus {
                border: 1px solid $blue;

                + .tip {
                    color: $blue;
                }
            }
        }

        &.has-errors {

            .input-text,
            .input-select {
                border: 1px solid $alert-color;

                + .tip {
                    color: $alert-color;
                }
            }
        }

        .tip {
            @extend %t-copy-sub1;
            display: block;
            color: $gray-l1;
        }
    }

    .required-wrapper {
      display: inline-block;
      vertical-align: top;
      width: 60%; // TODO: susy grid
    }

    .optional-wrapper {
      display: inline-block;
      vertical-align: top;
      width: 35%; // TODO: susy grid
      @include margin-left(2%);
      border-left: 2px solid $gray-l4;
      padding-left: 2%;
    }
  }

  .form-actions {
        margin-top: $baseline;
    }

    .action {
      @extend %t-copy;
      @extend %t-action2;
      @include margin-right ($baseline/2);
      padding: ($baseline/2) $baseline;
    }

    .action-primary {
      @extend %btn-primary-blue;
      display: inline-block;
      text-shadow: none;
    }

    .action-cancel {
      @extend %button-reset;
      display: inline-block;
      border: 1px solid transparent;
      color: $gray;

      // STATE: hover and focus
      &:hover,
      &:focus {
          border: 1px solid $link-color;
          color: $link-color;
    }
  }

  .header-action-view {
    display: inline-block;
    width: 33%;
    vertical-align: text-bottom;

    .join-team.form-actions, .join-team-message {
      @include text-align(right);
    }
  }

  .join-team-message {
    @extend %t-copy-sub1;
    color: $gray-l1;
  }

  .team-actions {
    @extend %ui-well;
    margin: 20px 1.2%;
    color: $gray;
    text-align: center;

    .title {
      @extend %t-title6;
      @extend %t-strong;
      margin-bottom: ($baseline/2);
      text-align: inherit;
      color: inherit;
    }

    .copy {
      text-align: inherit;
      color: inherit;
    }
  }
}

.teams-content {

  .teams-main {

    .team-edit-fields {
      @include clearfix();

    .team-required-fields {
      @include float(left);
      width: 55%;
      border-right: 2px solid $gray-l4;;

      .u-field.u-field-name {
        padding-bottom: $baseline;

        .u-field-value {
          display: block;
          width: 90%;

          input {
            border-radius: ($baseline/5);
            height: ($baseline*2);
          }
        }

        .u-field-message {
          @include padding-left(0);
          padding-top: ($baseline/4);
          width: 100%;
        }
      }

      .u-field.u-field-description {

        .u-field-value {
          display: block;
          width: 100%;

          textarea {
            height: ($baseline*5);
            width: 90%;
            border-radius: ($baseline/5)
          }
        }

        .u-field-message {
          display: block;
          @extend %t-copy-sub1;
          @include padding-left(0);
          margin-top: ($baseline/4);
          color: $gray-l1;
          width: 90%;
        }
      }

      .u-field-title {
        padding-bottom: ($baseline/4);
        color: $base-font-color;
        width: 40%;
      }
    }

    .team-optional-fields {
      @include float(left);
      @include margin-left($baseline);
      width: 40%;

      .u-field.u-field-optional_description {
        margin-bottom: ($baseline/2);

        .u-field-title {
          color: $base-font-color;
          font-weight: $font-semibold;
          margin-bottom: ($baseline/5);
          width: 100%;
        }

        .u-field-value {
          display: none;
        }
      }

      .u-field.u-field-language {
        margin-bottom: ($baseline/5);
      }

      .u-field-value-display {
        display: none;
      }

      .u-field-value {
        width: 90%;
      }

      .u-field-title {
        display: block;
        color: $base-font-color;
        width: 35%;
      }

      .u-field-message {
        @include padding-left(0);
        width: 95%;
      }
    }

  }

    .u-field {
      padding: 0;
    }

    .u-field.error {
      input, textarea {
        border-color: $error-red;
      }

      .u-field-message-help, .u-field-description-message {
        color: $error-red !important;
      }
    }

    .create-team.wrapper-msg {
      margin: 0 0 $baseline 0;
    }
  }
}

.form-instructions {
  margin: ($baseline/2) 0 $baseline 0;
}

.create-team.form-actions {
  margin-top: $baseline;
}


