@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';

$sizes: 's', 'm', 'l';

$loader-height: (
  's': styles-tokens-element.$dimension-3m,
  'm': styles-tokens-element.$dimension-4m,
  'l': styles-tokens-element.$dimension-5m,
);

.loader {
  display: flex;
  align-items: center;
  justify-content: center;

  @each $size in $sizes {
    &[data-size='#{$size}'] {
      height: styles-tokens-element.simple-var($loader-height, $size);

      &[data-no-items] {
        $no-items-loading-height: calc(3 * styles-tokens-element.simple-var($loader-height, $size));

        min-width: calc(2 * $no-items-loading-height);
        height: $no-items-loading-height;
      }
    }
  }

  &:focus-visible {
    @include styles-tokens-element.outline-inside-var(styles-tokens-element.$container-focused-s);

    outline-color: styles-tokens-element.$sys-available-complementary;
  }
}

.scrollStub {
  height: calc(styles-tokens-element.$dimension-025m / 2);
  margin-top: calc(styles-tokens-element.$dimension-025m / -2);
  background: transparent;
}

.footer {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: styles-tokens-element.$dimension-050m;
}

.content {
  overflow: hidden;
  flex-grow: 1;
}

.virtualizedContainer {
  position: relative;
  width: 100%;
}

.virtualizedPositionBox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}