.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;
  }

  // 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 {
      @include text-align(right);

      display: inline-block;
      width: flex-grid(4, 12);
      vertical-align: text-bottom;
    }
  }

  // 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 {
    .wrapper-search-input {
      display: inline-block;
      position: relative;
      vertical-align: middle;
    }

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

    .search-field {
      transition: all $tmg-f2 ease-in-out;
      border: 1px solid $gray-l4;
      border-radius: 3px;
      padding: ($baseline/4) ($baseline/2);
      font-family: inherit;
      color: $gray;
    }

    .action-search {
      @extend %button-reset;

      background-color: $gray-l3;
      padding: ($baseline/5) ($baseline/2);
      text-shadow: none;
      vertical-align: middle;

      .icon {
        color: $white;
      }

      // STATE: hover and focus
      &:hover,
      &:focus {
        background-color: $blue;
      }
    }

    .action-clear {
      @include right(0);
      @include margin(0, ($baseline/4), 0, 0);

      @extend %button-reset;

      position: absolute;
      top: 0;
      padding: ($baseline/4);
      color: $gray-l3;

      // STATE: hover and focus
      &:hover,
      &:focus {
        color: $black;
      }
    }
  }

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

  .page-content-nav {
    @extend %page-content-nav;
  }

  .intro {
    @extend %t-weight4;
  }

  .listing-tools {
    margin: ($baseline/10) $baseline;
  }

  // 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,
    &:focus-within {
      box-shadow: 0 0 5px 1px $m-blue-t1;

      .card-description {
        color: $body-color;
      }
    }

    .wrapper-card-core {
      @include clearfix();

      padding: ($baseline);
    }

    .card-type {
      @extend %t-copy-sub2;

      color: $gray;
    }

    .card-title {
      @extend %t-title5;
      @extend %t-strong;

      margin-bottom: rem(0.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-l6;
      color: $gray;

      .meta-detail {
        @include margin(($baseline/4) ($baseline*0.75) ($baseline/4) 0);

        color: $gray-d1;

        abbr {
          border: 0;
          text-decoration: none;
        }

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

      .member-count {
        display: inline-block;
        vertical-align: middle;

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

      .list-member-thumbs {
        @extend %ui-no-list;

        display: inline-block;
        vertical-align: middle;

        .item-member-thumb {
          display: inline-block;
          margin: 0 ($baseline/4);
        }

        img {
          width: $baseline;
          height: $baseline;
          border-radius: ($baseline/5);
          border: 1px solid $gray-l4;
        }
      }
    }

    &.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;
        vertical-align: middle;
      }

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

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

    &.has-pennant {
      .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*0.75);
        color: $white;
      }
    }

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

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

  .team-management {
    padding: 1%;

    h3,
    p,
    .action,
    .team-management-section,
    input {
      margin-bottom: 2%;
    }

    #upload-team-csv {
      display: block;
    }
  }

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

    .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;

      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;

    &:focus {
      border: inherit;
      box-shadow: none;
    }

    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;

    @include text-align(right);

    color: $gray-l1;
    display: block;
    margin-bottom: ($baseline/4);
  }

  .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 {
      overflow: hidden;
      position: relative;
      width: 100%;

      @include clearfix();

      .team-required-fields {
        @include float(left);

        width: 55%;

        .u-field {
          @include margin-right($baseline*2);
        }

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

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

            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 {
            width: 100%;

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

          .u-field-footer {
            .u-field-message {
              display: block;

              @extend %t-copy-sub1;

              @include padding-left(0);

              margin-top: ($baseline/4);
              color: $gray-l1;
              width: 100%;
            }
          }
        }

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

      .team-optional-fields {
        @include float(left);
        @include margin-left($baseline*2);

        width: 40%;

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

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

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

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

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

        .u-field-title {
          color: $body-color;
        }

        .u-field-message {
          @include padding-left(0);
        }

        .u-field-title,
        .u-field-value,
        .u-field-message {
          width: 100%;
        }
      }
    }

    .u-field {
      padding: 0;
    }

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

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

    .teams-paging-header .listing-sort-select.input-select,
    .topics-paging-header .listing-sort-select.input-select {
      border: 1px solid $gray-l2;
    }

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

// vertical line between required and optional fields
.vertical-line::after {
  height: 100%;
  border-left: 2px solid $gray-l4;
  content: "";
  position: absolute;
}

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

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