@use '../../../../mx-core/src/base/typography' as typo;

.mx-table-customize-columns-setting {
  &__content {
    margin-bottom: 16px;

    .columns-count {
      display: flex;
      align-items: center;
      height: 36px;
      box-sizing: border-box;
      padding: 0 16px 4px 16px;
      justify-content: space-between;

      .checkbox-icon {
        margin-right: 8px;
      }
    }

    .columns-list {
      &-container {
        max-height: 430px;
        overflow-y: auto;
      }

      &-area {
        .column-item-placeholder {
          width: 100%;
          height: 100%;
        }

        mx-list-item {
          .drag-handle {
            cursor: move;
          }

          &.non-draggable {
            .mx-list-item:hover {
              .mx-list-item--ripple {
                background-color: transparent !important;
              }
            }

            .drag-handle {
              opacity: 0.5;
              cursor: not-allowed;
            }
          }
        }
      }
    }
  }
}