/**
 * @author Thomas Kleinke
 */
types {
  document-info {
    position: relative;
    z-index: 6;
    font-size: 14px;

    .document-info {
      border-right: 1px solid #e9ecef;
    }
  }

  #type-grid {
    height: calc(100vh - 100px);
    margin-top: 2px;
    margin-left: -15px;
    margin-right: -15px;
    border-top: 1px solid #e9ecef;

    .cdk-virtual-scroll-content-wrapper {
      padding-bottom: 61px;
    }

    loading-icon {
      position: absolute;
      top: calc(50% - 45px);
      left: calc(50% - 20px);

      &.with-main-document {
        left: calc(50% + 109px);
      }
    }

    #grid-elements-container {
      height: 100%;
      display: flex;
      flex-direction: column;

      .grid-section-label {
        height: 40px;
        padding: 5px;
        color: black;
        background-color: white;
        text-align: center;
        line-height: 30px;
        font-size: 14px;
        user-select: none;
        border-bottom: 1px solid #e9ecef;
        border-top: 1px solid #e9ecef;

        &:hover {
          background-color: #e8e8e8;
          color: black;
        }

        &:active {
          box-shadow: inset 1px 1px 2px 1px rgba(0, 0, 0, 0.2) !important;
        }

        &.first-grid-section-label {
          border-top: none;
        }

        .mdi {
          color: $brand-primary;
        }
      }

      .grid-section {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        position: relative;

        type-grid {
          flex-grow: 1;
        }

        .cdk-virtual-scroll-viewport {
          height: 100%;
          overflow-x: hidden;
        }

        .cdk-virtual-scroll-content-wrapper {
          display: flex;
          flex-wrap: wrap;
        }

        .type-grid-element {
          width: 202px;
          height: 227px;
          margin: 3px;
          background-color: #fff;
          position: relative;

          .type-grid-resource-info {
            position: absolute;
            height: 25px;
            width: 192px;
            line-height: 25px;
            text-align: center;
            font-size: 14px;
            user-select: none;
            bottom: 5px;
            left: 50%;
            transform: translateX(-50%);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            &:hover {
              background-color: rgba(255, 255, 255, 0.8);
              height: auto;
              overflow-wrap: break-word;
              white-space: normal;
              z-index: 5;
            }
          }

          .badge {
            position: absolute;
            top: 5px;
            left: 50%;
            transform: translateX(-50%);
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
            cursor: default;

            &:hover {
              overflow-wrap: break-word;
              white-space: normal;
              z-index: 5;
            }
          }

          &:hover {
            box-shadow: 1px 10px 30px 0 rgba(0, 0, 0, 0.3);
          }

          category-icon {
            .category-icon {
              position: relative;
              left: 71px;
              top: 71px;
            }
          }
        }

        #plus-button-container {
          height: 63px;
          padding-top: 10px;
          position: absolute;
          bottom: 0;
          left: calc(50% - 21px);

          #create-document-button .circular-button {
            margin: auto auto auto auto;
          }

          .loading-icon {
            margin: -23px auto auto auto;
          }
        }

        .type-grid-element + #plus-button-container {
          padding-top: 9px;
        }
      }
    }
  }
}