@import 'ctl_base_ui/colors';
@import 'ctl_base_ui/mixins';
@import 'ctl_base_ui/icons';

.panel {
  border-top: 10px solid $grey;
  margin: 12px 12px 12px 0;
  padding: 10px;
  font-size: 0.9em;
  position: relative;

  &:hover {
    border-top-color: $blue_grey;
    background-color: $light_grey;
    header {
      color: $blue_grey;
    }
  }

  header {
    border-bottom: 1px solid $grey;
    color: $blue_grey;
    font-weight: bold;
    line-height: 25px;
    padding-bottom: 10px;
  }
}

.category-panel {
  @extend .panel;
  width: 292px;
  float: left;
  position: relative;

  .confirm-delete span {
    margin-top: -8px;
  }

  &.add {
    button {
      height: 45px;
      min-width: 45px;
      position: relative;
      margin: 3px 0 15px 123px;
      &:after {
        @include icon-white;
        @extend .icon-plus-large;
        content: '';
        position: absolute;
        left: 13px;
        top: 13px;
        display: block;
        height: 20px;
        width: 20px;
      }
    }
  }

  &.new {
    .name {
      width: 80%;
    }
    .actions {
      width: 20%;
      display: block;

      a.text {
        display: block;
        margin-top: 10px;
        margin-left: 10px;
        color: $sky_blue;
        font-weight: normal;

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

  &:hover {
    ul.services {
      li {
        &:hover {
          background-color: $white;
          color: $dark_blue;
          > a {
            width: 168px;
          }
          .actions {
            display: inline-block;
          }
          .service-icon:before {
            @include icon-light-blue;
          }
        }
      }
      .service-icon {
        background-color: $white;
      }
    }
    header .actions {
      display: block;
    }
  }

  header {
    position: relative;
    min-height: 30px;

    span.tooltip {
      right: 0;
      line-height: 1em;
      &:before {
        right: 5px;
      }
    }
  }

  header span.content-editable {
    color: $dark_grey;
    min-height: 50px;
  }

  header .actions {
    position: absolute;
    right:0;
    top: 0;
    display: none;
    width: 40px;
    height: 40px;

    a.edit-action,
    a.delete-action {
      float: left;
    }
  }


  a.button-positive {
    @include border-box;
    width: 100%;
    position: relative;
    padding-left: 30px;
    text-align: left;
    text-decoration: none;
    &:after {
      @include icon-white;
      @extend .icon-plus;
      content: '';
      position: absolute;
      left: 10px;
      top: 13px;
      display: block;
      height: 10px;
      width: 10px;
    }
    &:hover {
      padding-left: 30px;
    }
  }

  ul.services {
    padding-bottom: 6px;
    margin-bottom: 19px;

    li {
      position: relative;
      margin-bottom: 10px;
      height: 40px;
      border-radius: 4px;

      &:last-of-type:after {
        content: ' ';
        clear: both;
        display: block;
        width: 100%;
        height: 15px;
        border-bottom: 1px solid $grey;
      }


      &#dragging {
        border: 1px dashed $medium_grey;
        opacity: 0.4;
      }

      &:hover {
        cursor: move;
      }

      .service-icon {
        display: inline-block;
        float: left;
        background-color: $light_grey;
        width: 40px;
        height: 40px;
        margin-right: 6px;
        border-radius: 4px;
        img {
          margin: 10px 0 0 10px;
          width: 20px;
          height: 20px;
        }
      }
      .imagelayers-action {
        position: relative;
        text-indent: -9999px;
        color: transparent;
        float: left;
        height: 40px;
        width: 20px;
        &:after {
          content: '';
          height: 18px;
          width: 20px;
          display: block;
          position: absolute;
          top: 13px;
          left: -1px;
          background: image-url('icon_image_layers.svg') -2px -34px no-repeat;
          background-size: 20px 50px;
        }

        &:hover:after {
          background-position: -2px 1px;
        }
      }
    }
  }
}

#dragging.category-panel {
  opacity: 0.5;
  border: 1px dashed $medium_grey;
  width: 290px;
}

ul.dragging-service {
  width: 292px;
  padding-bottom: 6px;

  li {
    position: relative;
    margin-bottom: 10px;
    height: 40px;
    border-radius: 4px;
    background: $light_grey;
    opacity: 0.7;

    > a {
      display: inline-block;
      margin-left: 4px;
      padding-left: 2px;
      position: absolute;
      top: 14px;
      width: 210px;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 16px;
      white-space: nowrap;
      text-decoration: none;
    }

    .service-icon {
      display: inline-block;
      float: left;
      background-color: $light_grey;
      width: 40px;
      height: 40px;
      margin-right: 6px;
      border-radius: 4px;
      img {
        margin: 10px 0 0 10px;
      }
    }

    .actions {
      display: none;
    }
  }
}

h1 span.application-title {
  width: auto;
  padding-right: 30px;
  display: inline-block;

  .edit-field {
    margin-right: 15px;
  }
}

h1 li:last-of-type:hover .actions {
  display:block;
}

h1 .actions {
  display: none;
  position: absolute;
  top: 30%;
  right: 0;
  width: 20px;
  height: 20px;

  a.edit-action {
    float: left;
    display: block;
    width: 40px;
    height: 40px;

    &:after {
      left: 0px;
      top: 0px;
      display: inline-block;
      @include icon-light-grey;
      @extend .icon-pencil-large;
      width: 40px;
      height: 40px;
    }

    &:hover:after {
      @include icon-grey;
    }
  }
}

section.notice {
  margin-bottom: 20px;

  #post-run-html {
    display: none;
  }
}

.ui-dialog #post-run-html {
  margin: 20px;
}

.service-detail {
  float: left;
  font-size: 13px;
  margin-right: 20px;

  header {
    @include border-radius(3px);
    background: $blue_grey;
    color: $white;
    font-weight: normal;
    padding: 13px 15px;
  }

  ul li {
    line-height: 42px;
  }
}

section.deployment-details {
  padding-bottom: 40px;
  font-size: 0.9em;
  position: relative;


  ul.deployment-env {
    float: left;
    margin: 0 0 30px 0;
    padding: 0;

    li {
      height: 20px;
    }

    a {
      text-decoration: underline;
    }

    span.application-access {
      position: relative;
      text-decoration: underline;
      display: inline-block;
      padding-right: 10px;
      border-right: 1px solid #aaa;
      margin-right: 8px;

      &:hover {
        cursor: pointer;
      }
    }
  }
}

section.application-services {
  width: 100%;
  overflow: hidden;
  padding-bottom: 20px;

  header {
    border-bottom: 1px solid $grey;
    line-height: 30px;
    margin-bottom: 19px;
  }

  h3 {
    @include border-box;
    width: 880px;
    display: inline-block;
    margin-bottom: 4px;
  }

  nav {
    @include border-box;
    display: inline-block;

    a {
      @include border-radius(4px);
      vertical-align: top;
      position: relative;
      display: inline-block;
      width: 31px;
      background: none;
      height: 31px;
    }

    a.list {
      &.selected {
        background: $grey;
      }

      &.selected:before {
        @extend .icon-list-large;
        @include icon-grey;
      }

      &:before {
        content: '';
        position: absolute;
        left: 6px;
        top: 6px;
        display: block;
        @extend .icon-list-large;
        @include icon-light-grey;
        width: 20px;
        height: 20px;
      }
    }


    a.relationship {
      &.selected {
        background: $grey;
      }

      &.selected:before {
        @include icon-grey;
      }

      &:before {
        content: '';
        position: absolute;
        left: 6px;
        top: 6px;
        display: block;
        @include icon-light-grey;
        @extend .icon-link-large;
        width: 20px;
        height: 20px;
      }
    }
  }

  .relationships {
    float: right;
    width: 50%;
    .relationship-panel {
      @extend .service-detail;
      width: 263px;
      float: left;

      ul.links {
        margin-left: 20px;
        padding-left: 40px;
        position: relative;
        border: 0;

        &:before {
          z-index: -1;
          position: absolute;
          content: '';
          border: $blue_grey 1px solid;
          border-width: 0 0 1px 1px;
          height: 50px;
          width: 20px;
          top: -27px;
          left: 0;
        }
      }
    }
  }
  .views {
    position: relative;
    right: 100%;
    width: 200%;

    .category-panel:not(.add):not(.new):hover {
      cursor: move;
    }

    .categories {
      float: right;
      width: 50%;

      &.ui-sortable-disabled .category-panel:hover {
        cursor: auto;
      }

      .category-panel {
        &:nth-of-type(3n+0) {
          margin-right: 0;
        }

        &:nth-of-type(3n+4) {
          clear: both;
        }

        &.add {
          button {
            height: 45px;
            min-width: 45px;
            position: relative;
            margin: 3px 0 15px 123px;
            &:after {
              @include icon-white;
              @extend .icon-plus-large;
              content: '';
              position: absolute;
              left: 13px;
              top: 13px;
              display: block;
              height: 20px;
              width: 20px;
            }
          }
        }

        &.new {
          .name {
            width: 80%;
          }
          .actions {
            width: 20%;
            display: block;

            a.text {
              display: block;
              margin-top: 10px;
              margin-left: 10px;
              color: $blue_grey;
              font-weight: normal;

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

        &:hover {
          ul.services {
            li {
              &:hover {
                background-color: $white;
                color: $blue_grey_dark;
                > a {
                  width: 167px;
                }
                .actions {
                  display: inline-block;
                }
                .service-icon:before {
                  @include icon-light-blue;
                }
              }
            }
            .service-icon {
              background-color: $white;
            }
          }
          header .actions {
            display: block;
          }
        }

        header {
          position: relative;
          min-height: 30px;
        }

        header span.content-editable {
          color: $dark_grey;
          min-height: 50px;
        }

        > header .actions {
          position: absolute;
          right:0;
          top: -5px;
          display: none;
          width: 40px;
          height: 40px;
        }

        a.button-positive {
          @include border-box;
          width: 100%;
          position: relative;
          padding-left: 30px;
          text-align: left;
          text-decoration: none;
          &:after {
            @include icon-white;
            @extend .icon-plus;
            content: '';
            position: absolute;
            left: 10px;
            top: 13px;
            display: block;
            height: 10px;
            width: 10px;
          }
        }

        ul.services {
          padding-bottom: 6px;
          margin-bottom: 19px;

          li {
            position: relative;
            margin-bottom: 10px;
            height: 40px;
            border-radius: 4px;

            &:last-of-type:after {
              content: ' ';
              clear: both;
              display: block;
              width: 100%;
              height: 15px;
              border-bottom: 1px solid $grey;
            }

            &#dragging {
              border: 1px dashed $medium_grey;
              opacity: 0.4;
            }

            &:hover {
              cursor: move;
            }

            > a {
              display: inline-block;
              margin-left: 4px;
              padding-left: 2px;
              position: absolute;
              top: 14px;
              width: 225px;
              overflow: hidden;
              text-overflow: ellipsis;
              line-height: 16px;
              white-space: nowrap;
              text-decoration: none;
            }
            &.status-loading,
            &.status-stopped {
              .service-icon {
                img {
                  display: none;
                }

                &:after {
                  content: '';
                  position: absolute;
                  left: 13px;
                  top: 13px;
                  display: block;
                  height: 16px;
                  width: 16px;
                }
              }
            }

            &.status-stopped {
              .service-icon {
                &:after {
                  background-image: url('/assets/icon_status_stopped.png');
                }
              }

              > a {
                font-style: italic;
                color: $lipstick_red;
              }
            }

            &.status-loading {
              .service-icon {
                &:after {
                  background-image: url('/assets/icon_loading_green.gif');
                }
              }

              > a {
                font-style: italic;
                color: $medium_grey;
              }
            }

            span.tooltip {
              left: 43px;
              top: 36px;
              max-width: 220px;

              &:before {
                left: 5px;
              }
            }


            .actions {
              display: none;
              float: right;
              height: 40px;
              padding-right: 5px;
            }
          }
        }
      }
    }

    .relationships {
      float: right;
      width: 50%;
      .relationship-panel {
        @extend .service-detail;
        width: 263px;
        float: left;

        &:nth-child(3n+0) {
          margin-right: 0;
        }

        &:nth-child(3n+4) {
          clear: both;
        }

        ul.links {
          margin-left: 20px;
          padding-left: 40px;
          position: relative;
          border: 0;

          li {
            position: relative;

            &:before {
              z-index: -1;
              position: absolute;
              content: '';
              border: $blue_grey 1px solid;
              border-width: 0 0 1px 1px;
              height: 50px;
              width: 20px;
              top: -27px;
              left: -40px;
            }
          }
        }
      }
    }
  }
}
