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

.SortPopover__container {
  width: 21rem;
  max-height: 21rem;
  padding: 0.5rem 1rem;
  width: toRem(392px);

  &__optionList {
    max-height: 12rem;
    overflow: auto;
  }
  &__label {
    margin-bottom: $space-sm;
    display: block;
  }
  &__selectBox {
    margin-bottom: 1rem;
    &__listBox {
      .MuiAutocomplete-option {
        &[aria-selected='true'] {
          background-color: transparent;
          .SortPopover__select__item {
            color: $primary-color;
          }
        }
        &[data-select='true'] {
          background-color: transparent;
        }
      }
      .SortPopover__select__item {
        &.isDisabled {
          color: $primary-color-50 !important;
          .MuiCheckbox-colorPrimary.Mui-disabled {
            color: $primary-color-50;
          }
        }
      }
    }

    &__selectInput {
      .MuiInputBase-root .MuiInputBase-input {
        color: $pico-70;
      }
    }
  }
  &__chipContainer {
    margin: 0.5rem 0 1rem 0;
  }
}

.SortPopover__chip {
  margin-bottom: 0.5em;
  font-size: $text-md;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.SortPopover__chip__label {
  margin-left: 0.25em;
  display: inline-block;
  max-width: 140px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.SortPopover__chip__left {
  display: flex;
  justify-content: space-between;
}

.SortPopover__chip__delete {
  cursor: pointer;
  font-size: $text-sm;
  margin-right: 0.875rem;
  &.disabled {
    display: none;
  }
}

.TooltipContentPopover__toggle__button {
  span {
    display: inline-block;
    max-width: 130px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1;
  }
}
.SortPopover__select__item {
  display: flex;
  width: 100%;
  overflow: hidden;
  &__label {
    margin-left: $space-xs;
    max-width: 100%;
    overflow: hidden;
    word-break: break-all;
  }
}

.SortPopover__reset__sorting {
  margin-top: 0.5em;
  display: flex;
  justify-content: center;
  border-top: $border-main;
  padding-top: 0.5rem;

  button {
    background-color: $pico-50;
    color: #fff;
    &:hover {
      background-color: $pico-50;
    }
  }
}
