@use '../abstracts/variables' as SRC;
@use '../abstracts/mixins' as SRCMixins;
@use 'sass:map';

table.DownloadListTableV2 {
  white-space: pre;
  .eligibileIcon {
    color: map.get(SRC.$colors, 'gray-800');
    svg {
      width: 15px;
    }
  }
  .ineligibileIcon {
    color: map.get(SRC.$colors, 'warning');
    svg {
      width: 18px;
    }
  }
  .ineligibleForPackagingTd {
    background-color: #F9F5E7;
  }
  thead:first-child > tr:first-child {
    > th {
      min-width: 120px;
      &:first-child {
        border-right: none;  
        min-width: unset;
      }
      &:nth-child(2) {
        border-left: none;
      }
    }
  }
  tbody tr > td:first-child { // file name column
    overflow-x: hidden;
    max-width: 310px;
    text-overflow: ellipsis;
  }

  // Floating (sticky) Action column
  @include SRCMixins.sticky-column();

  // Download List Table specific styles to the sticky column:
  tbody .stickyColumn .actionsContainer {
    color: map.get(SRC.$colors, 'gray-700'); // make all icons gray-700
    display: grid;
    grid-template-columns: repeat(2, 45px); // TODO: change to 3 once we have the programmatic access item
    * {
      justify-self: center;
    }
    .downloadItem {
      grid-column: 1 / span 1;
    }
    .removeItem {
      grid-column: 2 / span 1;
    }
    // .programmaticAccessItem {
    //   grid-column: 3 / span 1;
    // }
  }

  @include SRCMixins.sortable-table();
}
.sort {
  padding-left: 5px;
}
.DownloadDetailsV2 {
  font-weight: bold;
  .item {
    margin-right: 35px;
    svg {
      margin-right: 5px;
      margin-top: -4px;
    }
    #icon-packagableFile svg {
      margin-top: 0px;
    }
  }
}

.Download-Link {
  &.v2 {
    #SHOW_DOWNLOAD_TOOLTIP {
      text-transform: none;
    }
    .download-cart-size {
      background-color: SRC.$secondary-action-color;
      color: white;
      border-radius: 8px;
      top: -9px;
      left: -2px;
      position: relative;
      padding: 0px 3px;
    }
  }
}