.overview-page {
  @include body-1;
  color: $dark-gray;
  overflow-y: auto;
  height: 100vh;

  .overview-content {
    display: flex;
    flex-wrap: wrap;
    min-height: 775px;

    .overview-separator {
      border-left: 1px solid $silver;
    }

    .workflow-details {
      @extend .flex;
      @media (min-width: 1076px) {
        @include sticky(30px);
      }
      max-height: 600px;
      padding: 0 45px 0 56px;
      flex-direction: column;

      .description-part {
        padding-top: 20px;
        textarea{
          height: 200px;
        }
      }

      .save-description {
        display: flex;
        justify-content: flex-end;
      }

      .version-info-part {
        background-color: $light-silver;
        margin-top: 25px;
        padding: 20px;
        box-sizing: border-box;
        .label {
          @include body-1;
          margin-bottom: 5px;
        }
        .value {
          margin-bottom: 20px;
          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }

    .workflow-versions {
      display: flex;
      flex: 2;
    }
  }

  .overview-header {
    display: flex;
    margin: 35px 60px 35px 60px;
    color: $blue;
    justify-content: space-between;
    .title {
      @include heading-1;
      text-transform: uppercase;    
    }
    .go-catalog-btn {
        fill: $blue;
        @include heading-4;      
        &:hover {
          fill: $light-blue;
          color: $light-blue;
          cursor: pointer;
        }
        .svg-icon {
          width: 16px;
          height: 16px;
        }
    }
  }

  @mixin version-page-box-shadow() {
    box-shadow: 1px 1px 0 0 rgba(24, 24, 24, 0.06);
  }

  @mixin version-page-sub-title(){
    color: $text-black;
    text-transform: uppercase;
    border-bottom: 1px solid $light-gray;
    padding: 12px 0 10px 45px;
  }

  .versions-page-view {
    padding: 0 56px 0 45px;
    display: flex;
    flex: 2;
    flex-direction: column;

    .create-new-version {
      @extend .text-uppercase;
      display: flex;
      flex-direction: row-reverse;
      color: $blue;
      margin-left: auto;
      cursor: pointer;
    }
    .newVersionDisabled > *, .svg-icon-wrapper{
      pointer-events: none;
      color: $gray;
    }
    .version-page-header {
      display: flex;
      justify-content: space-between;
      .versions-page-title {
        @include heading-1;
        text-transform: uppercase;
        margin-bottom: 29px;
        color: $blue;
      }
      .depricate-btn-wrapper {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 10px;
      }
    }

    .versions-page-list-and-tree {
      display: flex;
      margin-top: 10px;

      .version-tree-wrapper {
        display: flex;
        flex-direction: column;
        transition: all 1s ease;
        @include version-page-box-shadow();

        .version-tree-title-container {
          @include body-1-emphasis();
          @media (min-width: 1076px) {
            @include sticky(1px);
          }
          background-color: $light-silver;
          display: flex;
          align-items: center;
          height: 40px;
          @include version-page-sub-title();
          padding-right: 10px;

          .version-tree-full-screen {
            margin-left: auto;
          }
        }

        .tree-view {
          flex: 1;
          border-left: 1px solid $silver;
          &:last-child {
            border-bottom: 1px solid $silver;
          }
          .node:not(.selectedNode):hover {
            .outer-circle, .inner-circle {
              transform: scale(1.1);
            }
          }
        }
      }
    }

    .version-list {
      @extend .flex;
      flex-direction: column;

      .version-list-items {
        @extend .flex-column;

        .item-version, .item-status {
          font-size: 12px;
          font-weight: 600;
        }
        .version-item-row {
          &:last-child {
            border-bottom: 1px solid $silver;
          }
        }
      }

      .version-item-row {
        $row-hover-color: lighten($blue, 54%);
        $row-active-color: lighten($blue, 51%);
        cursor: $cursor-pointer;

        display: flex;
        align-items: center;
        padding: 15px 30px;
        @include version-page-box-shadow();
        height: 70px;
        max-height: 70px;

        &:hover {
          background-color: $row-hover-color;
        }

        &.selected {
          box-shadow: 0 1px 4px 0 rgba(24, 24, 24, 0.06), inset 5px 0 0 0 $blue;
          background-color: $row-active-color;

          &:hover {
            box-shadow: 0 1px 4px 0 rgba(24, 24, 24, 0.06), inset 5px 0 0 0 lighten($blue, 35%);
          }
        }

        &.header-row {
          height: 40px;
          background-color: $light-silver;
          @media (min-width: 1076px) {
            @include sticky(1px);
          }
          @include body-1-emphasis();
          @include version-page-sub-title();
          padding: 15px 27px;

          &:hover {
            pointer-events: none;
            &:active {
              @include version-page-box-shadow();
            }
          }
          .header-field.actions {
            margin-right: 57px;
          }
        }

        .version-item-field {
          @extend .flex;
          margin-right: 10px;

          &.item-version, &.item-status {
            flex: 0 1 10%;
            color: $text-black;
          }

          &.item-description, &.item-last-edited {
            @include body-1;
          }

          &.item-description, &.header-description {
            flex: 1 1 0;
          }

          &.item-description > .description-text {
            margin-right: 10px;
            @include ellipsis($max-width: 280px);
            width: initial;
          }

          &.item-actions {
            display: flex;
            flex: 1 1 3%;
            justify-content: space-between;
          }

          &.item-select, &.item-create {
            @include body-1;
            flex: 0 1 auto;
            margin-right: 0;

            .svg-icon-wrapper {
              fill: $blue;
              color: $blue;

              &[disabled] {
                cursor: default;
              }

              .svg-icon {
                width: 16px;
                height: 16px;
              }

              &:hover:not([disabled]) {
                fill: $dark-blue;
                color: $dark-blue;
              }
            }
          }

        }

        /* To keep ellipsis hider's background the same color as row background */
        &:not(.selected):hover .item-description > .description-text:after {
          background: $row-hover-color;
        }

        &:hover:active .item-description > .description-text:after {
          background: $row-active-color;
        }

      }

    }

    &.clickable {
      cursor: pointer;
    }
  }

}

.inputinput-selector {
  padding-right: 10px;
  border-color: $light-gray;
  border-radius: 2px;
  width: 100%;
  height: 30px;
  @include body-1;

  &:disabled {
    @extend .disabled;
    background-color: $silver;
  }
}