@use 'variables' as *;
@mixin multicolumn-combobox-styles($margin-top-value) {
  &.e-multicolumn-list {
    margin-top: $margin-top-value;
  }
}

@include export-module('multicolumn-combobox-bigger') {
  .e-bigger.e-popup,
  .e-bigger .e-popup {
    &.e-multicolumn-list .e-popup-footer {
      font-size: $multicolumn-bigger-popup-footer-font-size;
    }
    &.e-multicolumn-list .e-popup-footer,
    .e-multicolumn-grid .e-row,
    .e-multicolumn-grid .e-emptyrow {
      height: $multicolumn-grid-bigger-height;
    }
    @include multicolumn-combobox-styles($multicolumn-margin-top-bigger-value);
  }

  .e-bigger.e-multicolumn-list .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg,
  .e-bigger .e-multicolumn-list .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg {
    /* stylelint-disable declaration-no-important */
    height: $multicolumn-bigger-spin-pane-height !important;
    width: $multicolumn-bigger-spinner-width !important;
    transform-origin: 13px 13px 13px !important;
    /* stylelint-enable declaration-no-important */
  }

  .e-bigger.e-small.e-popup,
  .e-bigger.e-small .e-popup,
  .e-bigger .e-small.e-popup,
  .e-small .e-bigger.e-popup {
    .e-multicolumn-grid .e-headercelldiv,
    .e-multicolumn-grid .e-rowcell,
    &.e-multicolumn-list .e-popup-footer {
      font-size: $multicolumn-bgr-small-font-size;
    }
    &.e-multicolumn-list .e-popup-footer,
    .e-multicolumn-grid .e-row,
    .e-multicolumn-grid .e-emptyrow {
      height: $multicolumn-grid-bigger-small-height;
    }
    @include multicolumn-combobox-styles($multicolumn-margin-top-bigger-small-value);
  }
}