packages-native-component {
  .jf-header-item {
    .back-link a {
      i:before {
        font-size: 10px;
        position: relative;
        top: -1px;
      }
      &:hover {
        color: @greenBGDark;
      }
      color: @blackFontDark;
    }
    h1 {
      font-size: 24px;
      .native-package-type-icon {
        display: inline-block;
        width: 40px;
        height: 40px;
        vertical-align: middle;
      }
    }
  }

}

.context-menu-list {
  .context-menu-item.icon-docker-tags {
    &:before {
      .rotate-docker-tags()
    }
  }
}

.rotate-docker-tags() {
  transform: rotate(136deg);
  -webkit-transform: rotate(136deg);
  position: relative;
  left: -1px;
  top: 0;
  padding-left: 0px;
  font-size: 17px;
  margin-right: 4px;
}

body.packagesNative {
  .modal {
    .modal-title {
      color: @blackFontDark !important;
    }
  }
}

.full-text-modal.keywords-modal,
.summary-row,
.jf-table-cell-content {
  .modal-body.text-to-list {
    padding: 30px;
  }
  .text-to-list,
  .keywords-wrap {
    padding: 4px 0;
    .full-text-item,
    .keyword {
      border: 1px solid darken(@grayBorderLighter, 10%);
      background-color: @grayBorderLighter;
      border-radius: 12px;
      margin-right: 4px;
      padding: 4px 10px 6px 10px;
      display: inline-block;
      max-width: 30%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      cursor: pointer;
    }
    .full-text-item {
      margin-bottom: 20px;
      margin-right: 10px;
    }
  }
  .spinner-msg-local {
    margin-top: 4px;
  }
}
.summary-row {
  .keywords-wrap {
    .keyword {
//      border: 1px solid @grayBGLight;
      background-color: @grayBorderLighter;
      height: 25px;
      line-height: 20px;
      font-size: 80%;
      max-width: 20%;
    }
  }
  //.summary-description {
  //  //position: relative;
  //  .description-wrap {
  //    //position: absolute;
  //    //top: 30px; bottom: 16px; left: 20px; right: 20px;
  //    //font-weight: 700;
  //    //color: @blackBGLight;
  //    //line-height: 15px;
  //  }
  //}
}


packages-native-component {
  .jf-page-wrapper .jf-page-summary .summary-row span {font-size: 16px;}

  #summary-icon {
    height: 100%;
    position: relative;
    i {
      display: inline-block;
      font-size: 25px;
      top: 50%;
      transform: translateY(-50%);
      left: auto;
    }
  }

  .version-name,
  .package-name {
    border-left: 0 !important;
    padding-left: 5px !important;
    min-width: 120px;
  }

  .summary-row {
    .summary-item-label {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .summary-description .description-wrap {
      font-size: 14px;
      line-height: 1.5em;
      height: ~'calc(100% - 30px)';
      color: @blackBGLight;
    }
  }

}

jf-text-box {
  .show-more-text,
  .show-more-ellipsis {
    display: inline-block;
    font-weight: 900;
  }
  .show-more-text {
    color: black;
  }
}

.package-install-command {
  min-width: 200px;
  .install-command {
    white-space: nowrap;
    border: 1px solid @blackBGMediumDark;
    border-left: 5px solid @blackBGMediumDark;
    padding: 0 5px;
    line-height: 1em;
    span {
      display: inline-block;
      white-space: nowrap;
      overflow: hidden;
      max-width: 80%;
      margin-right: 10px;
      text-overflow: ellipsis;
      line-height: 1.8em;
    }

    jf-clip-copy span {
      line-height: 20px;
    }

  }
}