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

.Table__header {
  display: flex;
  padding: 0.2rem 1rem;
  height: toRem(38px);
  align-items: center;
  &__select__resize {
    padding-right: 1rem;
    display: flex;
    align-items: center;
    border-right: $border-main;
    margin-right: 1rem;

    i {
      &:nth-child(2) {
        margin: 0 0.875rem;
      }
    }
  }
  &__buttons {
    flex: 1;
  }
  &__item {
    cursor: pointer;
    display: flex;
    align-items: center;
    border: 0.0625rem solid transparent;
    transition: all 0.18s ease-out;
    border-radius: $radius-main;
    padding: 0 0.375rem !important;
    margin-right: 0.375rem !important;
    i {
      margin-right: 0.75rem;
    }
    &.opened {
      border: $border-main-active;
      background-color: $primary-color-10;
    }
    &--diffBtn {
      margin-right: $space-xs;
    }
  }
}

.ActionModalWrapper {
  max-width: 1800px;
}

.ActionModal {
  width: 100%;
  &__container {
    width: 60vw;
    max-width: 100%;
    .Modal__content {
      width: 100%;
    }
  }
  &__Table {
    .BaseTable__header {
      border-radius: toRem(4px) toRem(4px) 0 0;
      border-bottom: unset;
      .BaseTable__header-row {
        border-bottom: unset;
      }
    }
    .BaseTable__header-cell {
      background: $cuddle-20;
      border-right: unset;
    }
    .BaseTable__row {
      border-bottom: unset;

      .BaseTable__row-cell {
        border-right: unset;
      }
      &:nth-child(odd) {
        .BaseTable__row-cell {
          background: $white;
        }
      }
      &:nth-child(even) {
        .BaseTable__row-cell {
          background: $cuddle-10;
        }
      }
      &:hover {
        .BaseTable__row-cell {
          background: $primary-color-10;
        }
      }
    }
  }
  &__disabledTableWrapper {
    opacity: 0.5;
    .BaseTable__body > div {
      pointer-events: none;
    }
  }
  &__experimentRow {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .BaseTable__row:hover {
    .ActionModal__tableRowWithAction {
      &__deleteButton {
        display: flex;
      }
    }
  }
  &__tableRowWithAction {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    position: relative;
    &.isDisabled {
      justify-content: flex-start;
    }
    &__deleteButton {
      display: none;
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
    }
    &__name {
      padding-right: 2.875rem;
      &.in-progress {
        &::after {
          content: '';
          position: absolute;
          right: 1.75rem;
          width: 0.375rem;
          height: 0.375rem;
          top: 50%;
          border-radius: $border-radius-circle;
          background: $success-color-100;
          transform: translate(-50%, -50%);
        }
      }
    }
  }
  &__tableTitle {
    margin-top: 1rem;
    display: block;
    margin-bottom: toRem(6px);
    &__count {
      margin-right: $space-xxxs;
    }
  }
}
.TableColumn__SortButton {
  margin: 0 $space-xxxs;
}
.selectedRowActionsContainer {
  &__selectedRowsCount {
    padding: 0 1.25rem 0 0.25rem;
    margin: 0.25rem 0;
    display: flex;
    align-items: center;
    border-right: $border-main;
    margin-right: 1rem;
  }
}

.RunNameColumn {
  display: flex;
  align-items: center;
  &.isHidden {
    .MuiTypography-root {
      color: $primary-color-50;
    }
  }
}
