ui/app/styles/components/_pod.scss

$pod-border      : $table-border-color;
$pod-border-dark : $table-border-color;
$pod-bg          : $table-bg;
$subpod-detail   : $table-bg-accent;

.pods {
  overflow    : visible;
  white-space : nowrap;
}

.pod-column {
  /* width is set dynamically */
  width          : 260px;
  vertical-align : top;

  &:last-of-type {
    margin-right: 0;
  }
}

.pod {
  border: solid 1px $pod-border;
  background: $pod-bg;
  padding: 10px;
  position      : relative;
  margin-bottom : 10px;

  .pod-header {
    // font-weight    : $normal-weight;
  }
  .pod-name {
    margin-top: 5px;
  }

  .pod-state {
    font-size                  : 11px;
    font-weight                : 300;
    text-align                 : center;
    padding                    : 5px 10px;
    vertical-align             : top;
    display                    : inline-block;
    text-transform             : uppercase;
    line-height                : 1.364em;

    SPAN {
      position : relative;
      top      : -1px;
    }
  }

  .pod-name {
    text-align: center;
  }

  .pod-info {
    // margin     : 10px 0;
    text-align : center;

    .pod-info-container {
      display       : flex;
    }
    .pod-info-item {
      flex         : 1 1 auto;
      margin-top   : 5px;
      font-size    : 12px;
      color        : #8a919c;
      border-right : 1px solid $pod-border-dark;

      &:last-of-type {
        border-right: 0;
      }
    }
  }

  .pod-message {
    @include clip;

    text-align     : center;
    font-size      : 12px;
  }

  .add-to-pod {
    width: 100%;
  }
}

.pod-name,
.subpod-name {
  overflow      : hidden;
  text-overflow : ellipsis;
  white-space   : nowrap;

  A {
    color: inherit;

    &:hover {
      color: $link-hover-color;
    }
  }

  i {
    float: none;
  }
}

.subpod-name {
  min-width: 110px;
  font-size: 13px;
  cursor: pointer;

  I {
    font-size: 12px;
    text-align: center;
  }
}

.container-subpod-info {
  padding       : 5px 5px 0 5px;
  margin-bottom : 15px;
  border        : 1px solid $pod-border-dark;

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

  .subpod-header {
    margin           : -5px -5px 0 -5px;
    background-color : $pod-border-dark;
    background-color: mix($primary-dark, $table-bg-accent, 15%);
    padding          : 5px;


    H6 {
      margin: 3px 0;
      font-size: 13px;
    }

    .icon-chevron-down {
      font-size  : 12px;
      transition : ease all 350ms;
      font-size  : .75em;
    }

    &.open {
      .icon-chevron-down {
        transform: rotate(-180deg);
      }
    }
  }

}


.subpod-inner {

  > div:last-child {
    margin-bottom: 5px;
  }

  .add-to-pod {
    margin : 5px 0;
    display: block;
    padding    : 7px;
    font-size  : 12px;
    border: none;
  }

}

.container-subpod {

  display: flex;
  padding: 5px;

  > div {
    flex: 1 1 auto;
  }

  .resource-actions {
    margin-right  : -5px;
    margin-top    : -5px;
    margin-bottom : -5px;
    flex: 0 0 auto;

    .more-actions {
      height : 28px;
      float  : right;
      border : none;
      &:hover {
        // background : $btn-default-bg;
        color      : inherit;
      }

      i {
        right: -5px;
      }
    }
  }
}

.subpod {
  position         : relative;
  min-height       : 30px;
  background-color : $pod-bg;
  border           : 1px dotted $pod-border-dark;
  margin-top       : 5px;


  &:nth-child(odd).add-to-pod {
    width                      : 100%;
    border-bottom-right-radius : 5px;
  }

  .subpod-detail {
    color      : lighten($text-color, 30%);
    font-size  : 11px;;
    text-align : right;
    max-width  : 150px;
    margin-top: 2px;

    + .resource-actions .btn {
      margin-top: 3px;
      background: transparent;
      color: $link-color;
    }
  }

  &.managed A {
    color: $link-color;
  }
}

/* Make room for the menu button when showing it */
.no-touch .subpod:hover,
.touch .subpod {
  &.add-to-pod {
    padding-right: 10px;
  }
}


.subpod-children {
  border                    : 1px solid $subpod-detail;
  border-bottom-left-radius : 5px;
  background-color          : $subpod-detail;
  padding                   : 5px 5px 0 5px;

  H6 {
    margin: 0 5px 0 0;
  }
}

.tiny-hellip:before {
  content      : '\2026';
  font-size    : 8px;
  margin-right : -3px;
  display: inline-block;
}

.group-instance {
  &.closed {
    display : none;
    height  : 0;
  }
  &.open {
    display : block;
    height  : inherit;
  }
}