@import 'scss/styles.scss';

.user-icon {
  position: relative;
  width: fit-content;
  min-width: 26px;
  padding: 0 4px 2px;
  border-radius: 2px;
  cursor: pointer;
}

.active {
  background-color: $ta-black;
}

.columnpopovermain {
  padding: unset !important;
  .popover-arrow {
    display: none !important;
  }

  padding: unset !important;
  border: unset !important;

  .popover-body {
    padding: unset !important;
  }
}

.popover-arrow {
  display: none !important;
}

.popover-body {
  width: max-content;
  padding: 0;
}

.selectable-column-container {
  width: max-content;
  background-color: $black-2;
  color: $white-2;
  padding: 4px;
  border-radius: 4px;
}

.sel-col-header {
  min-width: 152px;
  padding: 4px 4px 8px 6px;
  font-size: 14px;
  font-weight: 800;
  text-align: left;
  border-bottom: 1px solid $ta-black;

  .sel-col-reset-icon {
    cursor: pointer;
  }
}

.sel-col-option {
  margin: 4px 0;
  padding: 0 4px;

  .sel-col-option-input {
    svg {
      overflow: visible;
    }

    .sel-col-radial-input {
      width: 14px;
      height: 14px;
      margin: 3px 0;

      border-radius: 50%;
      background-color: $bw5;
    }
  }

  &:hover {
    background-color: $ta-black;
    cursor: pointer;

    .sel-col-radial-input {
      background-color: $ta-light-grey-6;
    }
  }

  &.selected {
    font-weight: 700;
  }
}

.sel-col-option-input {
  display: inline-block;
  padding: 4px;
}