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

.dropzone {
  align-items: center;
  display: flex;
  justify-content: center;
  margin-bottom: rhythm(4);
  border: rhythm(0.25) dashed $color-neutral-light;
  color: rgba(0, 0, 0, 0.5);
  min-height: rhythm(12);
  transition: border-color $transition-hint;
  cursor: pointer;
  &.folder {
    cursor: copy;
  }
  span {
    transition: opacity $transition-hint;
  }
  &.file-over {
    border: 2px dashed $color-primary-regular;
    span {
      opacity: 0.3;
    }
  }
}

app-label-field {
  margin-bottom: rhythm(4);
}

.file-list {
  max-height: 13vh;
  overflow-y: auto;
  margin-bottom: rhythm(3);
  @include scrollbar-style(6px, var(--stf-gray-background), var(--stf-gray-background), #000, #000, 0, 0);
}

.file-item {
  display: flex;
  align-items: center;
  height: rhythm(4);
  margin-right: rhythm(1);
  box-shadow: $box-shadow-border-bottom;
  &:first-child {
    border-top: 1px solid $color-neutral-lighter;
  }
  &.over-limit {
    color: $color-neutral-light;
  }
  .file-name {
    flex: 0 1 rhythm(35);
    @include text-truncate();
    padding-right: rhythm(2);
  }
  .file-size {
    flex: 0 0 rhythm(10);
  }
  .file-actions {
    flex: 1 0 auto;
    text-align: right;
  }
}

pa-toggle {
  display: block;
  margin-bottom: rhythm(1);
  ::ng-deep .pa-field .pa-toggle-label-container {
    margin-left: 0 !important;
  }
}

.language-detection {
  display: flex;
  flex-direction: column;
  gap: rhythm(2);
  margin: rhythm(2) 0;
}

ncom-hint {
  display: block;
  margin-top: rhythm(2);
}
