@use 'src/styles/abstracts' as *;

.ExploreSection {
  display: flex;
  flex-direction: column;
  min-width: 310px;
  width: 310px;
  background-color: $pico-2;
  overflow: auto;
  height: 100vh;
  &__Spinner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  &__loading {
    display: none;
  }
  &__title {
    margin-top: 1.25rem;
    padding: 0 1.5rem;
  }
  .ExploreSection__content {
    .DataList {
      .CompareSelectedRunsPopover__trigger {
        margin-right: 0 !important;
        .Icon__container {
          margin-right: $space-xxxs;
        }
        .Text {
          font-size: $text-sm;
        }
      }

      .IllustrationBlock {
        &__container {
          padding-bottom: 0;
        }
        &__large__img {
          height: 100%;
          img {
            height: 100%;
          }
        }
      }
      .defaultSelectIcon {
        border: 1.5px solid $pico-50;
        border-radius: $border-radius-xs;
        width: 12px;
        height: 12px;
      }
      &__toolbarItems {
        height: unset;
        margin-left: $space-xs;
      }
      &__textsTable {
        border: none;
        padding-left: $space-xs;
      }
      .SearchBar {
        width: auto;
        min-width: 250px;
        padding: 0 $space-sm;
        margin-bottom: $space-xxxs;
        .SearchInput {
          margin-right: 0;
        }
        .MuiOutlinedInput-root {
          background-color: $white;
        }
        label {
          font-size: $text-sm;
        }
      }
      .selectedSelectIcon {
        border-radius: $border-radius-xs;
        width: 12px;
        height: 12px;
        background: $primary-color;
        color: $white;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .partiallySelectedSelectIcon {
        border-radius: $border-radius-xs;
        width: 12px;
        height: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .MuiCheckbox-root {
        padding: $space-xxxs !important;
      }
      .BaseTable {
        background-color: transparent;
        &__table {
          background-color: transparent;
        }
        &__header {
          background: transparent;
          &-row {
            background-color: transparent;
          }
          &-cell {
            border: none;
            background-color: transparent;
            padding: 0;
            &--text {
              font-size: 12px;
            }
          }
        }
        &__row {
          background-color: transparent;
          box-shadow: unset;
          &-cell {
            background-color: transparent;
            border: none;
            padding: 0;
            &:first-child {
              padding: 0;
            }
            p {
              max-width: 100%;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
            }
          }
        }
      }
    }
  }
}
