@use 'apps/dashboard/src/variables' as *;

.knowledge-box-home {
  --width-small-column: #{rhythm(48)};
  --gap-size: #{rhythm(2)};

  display: grid;
  grid-template-rows: min-content;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-size);

  .fullwidth-container {
    grid-column: span 2;
  }

  .column-container {
    display: flex;
    flex-direction: column;
    gap: var(--gap-size);

    &.wide-column {
      flex: 1 1 auto;
      max-width: calc(var(--width-small-column) * 2 + var(--gap-size));
      min-width: var(--width-small-column);
    }
  }
  .row-container {
    display: flex;
    gap: var(--gap-size);
    flex: 1 0 auto;

    .growing-container {
      flex: 1 1 auto;
      width: calc(100% / 2);
    }
  }

  .title-with-icon {
    align-items: center;
    display: flex;
    gap: rhythm(1);
    overflow-wrap: break-word;
  }

  .title-with-icon {
    pa-icon {
      display: flex;
    }
  }

  .title-with-actions {
    align-items: center;
    display: flex;
    justify-content: space-between;

    .actions {
      display: flex;
      gap: rhythm(1);
      align-items: center;

      &:has(pa-button) {
        margin-right: calc(-1 * #{rhythm(1)});
      }
    }
  }

  .select-container {
    align-items: center;
    display: flex;
    gap: rhythm(1);

    pa-select {
      min-width: 50%;
    }
  }

  .upload-data {
    display: flex;
    flex-direction: column;
    gap: rhythm(2);

    stf-desktop-sources {
      display: block;
      margin-bottom: rhythm(0.5);
    }
  }

  .desktop-container {
    display: flex;
    flex-direction: column;
    gap: rhythm(2);

    img {
      height: rhythm(4);
    }
    small {
      text-align: center;
    }
  }

  .kb-details,
  .kb-storage {
    div.title-xxs {
      color: $color-neutral-regular;
    }
  }

  .kb-details {
    .details-block {
      align-items: center;
      background-color: $color-neutral-lightest;
      border: 1px solid $color-neutral-light;
      border-radius: rhythm(0.5);
      display: flex;
      gap: rhythm(0.5);
      margin-top: calc(-1 * #{rhythm(0.25)});

      pre {
        margin-bottom: 0;
        white-space: normal;
      }
    }
  }

  .kb-storage {
    .index-size-container {
      align-items: center;
      background-color: $color-neutral-lightest;
      border: 1px solid $color-neutral-lighter;
      border-radius: rhythm(0.5);
      display: flex;
      justify-content: space-between;
      padding: rhythm(0.5) rhythm(1);
    }
  }

  // .resources-container {
  //   pa-tab ::ng-deep .pa-tabs-link {
  //     font-size: font-size(s);
  //   }

  //   pa-table a {
  //     color: $color-dark-stronger;
  //   }
  // }

  .usage-charts {
    .title-xxs.header {
      color: $color-neutral-regular;
    }
    .usage-charts-header {
      align-items: center;
      display: flex;
      gap: rhythm(1);
      > div {
        width: 50%;
      }
    }
  }

  .blocked-features {
    .title-with-icon {
      margin-bottom: rhythm(1);
    }
  }

  .info-text {
    color: $color-neutral-regular;
    margin: 0;
  }

  .resources-info-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: calc(-1 * #{rhythm(1)});

    pa-button {
      margin-right: calc(-1 * #{rhythm(1)});
    }
  }
}
