@import '../../assets/@theme/styles/themes';
@import '../../assets/@theme/styles/variables';
@import '../../assets/@theme/styles/_text-overflow.scss';

.pentest-overview {
  width: 100vw;
  height: 85vh;
  overflow: hidden !important;

  .pentest-overview-header {
    width: 100vw;
    height: 5rem;

    .header-filer {
      .project-filter-input {
        width: 24rem;
        border-color: nb-theme(color-control-default);


        .search-field:active {
          color: nb-theme(color-info-default);
          // opacity: initial;
        }

        .search-prefix-icon:active {
          color: nb-theme(color-info-default);
        }
      }

      .state-dialog {
        margin-left: auto;
        margin-right: 0;

        .states {
          width: 14rem !important;
        }
      }

      .reset-filter-btn {
        .btn-icon {
          padding-right: 0.5rem;
        }
      }
    }

    .header-project-button {
      position: fixed;
      right: 1.5rem;

      .add-project-button {
        // align-content: flex-end;
        margin: 6rem 2rem 6rem 0;

        .btn-icon {
          padding-right: 0.5rem;
        }
      }
    }
  }

  .pentest-overview-column {
    width: 100vw;
    // ToDo: Adjust this property when adding footer
    height: calc(100% - 15rem) !important;
    max-height: 100vh !important;
    margin-top: 1.25rem;
    // Scrollbar
    overflow-y: scroll !important;
    overflow-x: hidden;
    scroll-behavior: smooth;

      .project-grid {
        display: grid;
        /* define the number of grid columns */
        grid-template-columns: repeat( auto-fill, minmax(24rem, 1fr) );

        .project {
          padding-bottom: 1.25rem;
          height: max-content;
        }
      }

    .error-text {
      font-size: 1.25rem;
      font-weight: bold;
    }
  }
}
