// studio - views - group-configurations
// ====================
.view-group-configurations {

  .content-primary, .content-supplementary {
    @include box-sizing(border-box);
    float: left;
  }

  .content-primary {
    width: flex-grid(9, 12);
    margin-right: flex-gutter();

    .notice-moduledisabled {
      @extend %ui-well;
      @extend %t-copy-base;
      background-color: $white;
      padding: ($baseline*1.5) $baseline;
      text-align: center;
    }

    .no-group-configurations-content {
      @extend %ui-well;
      padding: ($baseline*2);
      background-color: $gray-l4;
      text-align: center;
      color: $gray;
    }

    .new-button {
      @include font-size(14);
      margin-left: $baseline;

      [class^="icon-"] {
        margin-right: ($baseline/2);
      }
    }

    .group-configuration {
      @extend %ui-window;
      position: relative;
      outline: none;

      .group-configuration-details {
        .wrapper-group-configuration {
          padding: $baseline ($baseline*1.5);

          .group-configuration-header {
            margin-bottom: 0;
            border-bottom: 0;
          }

          .group-configuration-title {
            @extend %t-title;
            @include font-size(22);
            @include line-height(22);
            overflow: hidden;
            text-overflow: ellipsis;
            margin-right: ($baseline*14);
            font-weight: bold;

            .group-toggle {
              display: inline-block;
              padding-left: $baseline;
              color: $black;

              &:hover, &:focus {
                color: $blue;
              }
            }
          }

          .group-configuration-info {
            @extend %t-copy-sub1;
            color: $gray-l1;
            margin-left: $baseline;

            &.group-configuration-info-inline {
              display: table;
              width: 70%;
              margin: ($baseline/4) 0 ($baseline/2) $baseline;

              li {
                @include box-sizing(border-box);
                display: table-cell;
                margin-right: 1%;

                &.group-configuration-usage-count {
                  font-style: italic;
                }
              }
            }

            &.group-configuration-info-block {
              li {
                padding: ($baseline/4) 0;
              }
            }

            .group-configuration-label {
              text-transform: uppercase;
            }

            .group-configuration-description {
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }

          .ui-toggle-expansion {
            @include transition(rotate .15s ease-in-out .25s);
            @include font-size(21);
            display: inline-block;
            width: ($baseline*0.75);
            vertical-align: baseline;
            margin-left: -$baseline;
          }

          &.is-selectable {
            cursor: pointer;

            &:hover {
              color: $blue;

              .ui-toggle-expansion {
                color: $blue;
              }
            }
          }

          .groups {
            margin-left: $baseline;
            margin-bottom: ($baseline*0.75);

            .group {
              @extend %t-copy-sub2;
              @include font-size(18);
              @include line-height(16);
              padding: ($baseline/7) 0 ($baseline/4);
              border-top: 1px solid $gray-l4;
              white-space: nowrap;

              &:first-child {
                border-top: none;
              }

              .group-name {
                overflow: hidden;
                text-overflow: ellipsis;
                display: inline-block;
                vertical-align: middle;
                width: 75%;
                margin-right: 5%;
              }

              .group-allocation {
                display: inline-block;
                vertical-align: middle;
                width: 20%;
                color: $gray-l1;
                text-align: right;
              }
            }
          }

          .actions {
            @include transition(opacity .15s .25s ease-in-out);
            opacity: 0.0;
            position: absolute;
            top: $baseline;
            right: $baseline;

            .action {
              display: inline-block;
              vertical-align: middle;
              margin-right: ($baseline/4);

              .edit {
                @include blue-button;
                @extend %t-action4;
              }

              .delete {
                @extend %ui-btn-non;

                &.is-disabled {
                  background-color: $gray-l3;
                  color: $gray-l6;
                }
              }
            }
          }
        }

        .wrapper-group-configuration-usages {
          @include font-size(14);
          background-color: #f8f8f8;
          box-shadow: 0 2px 2px 0 $shadow inset;
          padding: $baseline ($baseline*1.5) $baseline ($baseline*2.5);

          .group-configuration-usage {
            color: $gray-l1;
            margin-left: $baseline;

            .group-configuration-usage-unit {
              padding: ($baseline/4) 0;
            }
          }
        }
      }

      .group-configuration-edit {
        @include box-sizing(border-box);
        border-radius: 2px;
        width: 100%;
        background: $white;

        .wrapper-form {
          padding: $baseline ($baseline*1.5);
        }

        .tip {
          @extend %t-copy-sub2;
          @include transition(color, 0.15s, ease-in-out);
          display: block;
          margin-top: ($baseline/4);
          color: $gray-l3;
        }

        .is-focused .tip{
          color: $gray;
        }

        .actions {
          box-shadow: inset 0 1px 2px $shadow;
          border-top: 1px solid $gray-l1;
          padding: ($baseline*0.75) $baseline;
          background: $gray-l6;

          .action {
            margin-right: ($baseline/4);

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

          // add a group is below with groups styling
          .action-primary {
            @include blue-button;
            @extend %t-action2;
            @include transition(all .15s);
            display: inline-block;
            padding: ($baseline/5) $baseline;
            font-weight: 600;
            text-transform: uppercase;
          }

          .action-secondary {
            @include grey-button;
            @extend %t-action2;
            @include transition(all .15s);
            display: inline-block;
            padding: ($baseline/5) $baseline;
            font-weight: 600;
            text-transform: uppercase;
          }

          .wrapper-delete-button {
            float: right;
            padding: ($baseline/4) ($baseline/2);

            .is-disabled {
              color: $gray-l3;
            }
          }
        }

        .copy {
          @extend %t-copy-sub2;
          margin: ($baseline) 0 ($baseline/2) 0;
          color: $gray;

          strong {
            font-weight: 600;
          }
        }

        .groups-fields,
        .group-configuration-fields {
          @extend %cont-no-list;

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

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

            &.required {

              label {
                font-weight: 600;
              }

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

            label, input, textarea {
              display: block;
            }

            textarea {
              resize: vertical;
            }

            label {
              @extend %t-copy-sub1;
              @include transition(color, 0.15s, ease-in-out);
              margin: 0 0 ($baseline/4) 0;

              &.is-focused {
                color: $blue;
              }
            }

            //this section is borrowed from _account.scss - we should clean up and unify later
            input, textarea {
              @extend %t-copy-base;
              height: 100%;
              width: 100%;
              padding: ($baseline/2);

              &.long {
                width: 100%;
              }

              &.short {
                width: 25%;
              }

              ::-webkit-input-placeholder {
                 color: $gray-l4;
              }

              :-moz-placeholder {
                 color: $gray-l3;
              }

              ::-moz-placeholder {
                 color: $gray-l3;
              }

              :-ms-input-placeholder {
                 color: $gray-l3;
              }

              &:focus {
                + .tip {
                  color: $gray;
                }
              }
            }

            &.error {
                label {
                  color: $red;
                }

                input {
                  border-color: $red;
                }
            }

            &.add-group-configuration-name label {
              @extend %t-title5;
              display: inline-block;
              width: 50%;
              padding-right: 5%;
              overflow: hidden;
              text-overflow: ellipsis;
              vertical-align: bottom;
            }

            .group-configuration-id {
              display: inline-block;
              width: 45%;
              text-align: right;
              vertical-align: top;
              color: $gray-l1;

              .group-configuration-value {
                font-weight: 600;
                white-space: nowrap;
                margin-left: ($baseline*0.5);
              }
            }

            &.group-allocation {
              color: $gray-l1;
            }
          }

          label.required {
            font-weight: 600;

            &:after {
              margin-left: ($baseline/4);
              content: "*";
            }
          }

          .field-group {
            @include clearfix();
            margin: 0 0 ($baseline/2) 0;
            padding: ($baseline/4) 0 0 0;

            .group-allocation,
            .field {
              display: inline-block;
              vertical-align: middle;
              margin: 0 3% 0 0;
            }

            .group-allocation {
              max-width: 10%;
              min-width: 5%;
              color: $gray-l1;
            }

            .field {
              position: relative;

              &.long {
                width: 80%;
              }

              &.short {
                width: 10%;
              }
            }

            .action-close {
              @include transition(color 0.25s ease-in-out);
              @include font-size(22);
              display: inline-block;
              border: 0;
              padding: 0;
              background: transparent;
              color: $blue-l3;
              vertical-align: middle;

              &:hover {
                color: $blue;
              }
            }
          }
        }

        .group-configuration-fields {
          margin-bottom: $baseline;
        }
      }

      &:hover .wrapper-group-configuration .actions {
        opacity: 1.0;
      }

      .action-add-group {
        @extend %ui-btn-flat-outline;
        @include font-size(16);
        display: block;
        width: 100%;
        margin: ($baseline*1.5) 0 0 0;
        padding: ($baseline/2);
        font-weight: 600;
      }
    }
  }

  .content-supplementary {
    width: flex-grid(3, 12);
  }
}
