@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
@use '@cloud-ru/ds-figma-variables/build/scss/components/block.module' as block;

// Паддинг карточки задаёт сам Block l; нужен здесь для отрицательных margin'ов прилипшего футера.
$card-padding: block.$sn-block-anatomy-l-padding;

.container {
  display: flex;
  gap: base.$sn-primitive-dimension-24;
  justify-content: center;

  box-sizing: border-box;
  min-width: fit-content;
  min-height: 100%;
  padding: base.$sn-density-spacing-interval-l;
}

// Подложку, радиус и box-sizing несёт сам Block; здесь только габариты карточки.
.form {
  flex-shrink: 0;
  // 800px — фиксированная ширина карточки формы, токена нет.
  width: 800px;
  min-height: 100%;
}

// Block — подложка, а не layout-контейнер: раскладку контента задаёт потребитель
.formContent {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: base.$sn-primitive-dimension-32;
}

.headline {
  position: relative;
}

.body {
  @include base.composite-var(base.$sn-regular-body-m);

  flex: 1;
  color: base.$sn-theme-color-available-version-textMain;
  background-color: base.$sn-theme-color-neutral-background1Level;
}

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footerSticky {
  position: sticky;
  bottom: 0;

  box-sizing: border-box;
  // Отрицательные margin'ы компенсируют padding карточки, растягивая футер до её кромок.
  margin: calc(0px - $card-padding);
  padding: $card-padding;
  border-radius: 0 0 block.$sn-block-anatomy-l-borderRadius block.$sn-block-anatomy-l-borderRadius;

  background-color: base.$sn-theme-color-neutral-background1Level;

  // Верхний разделитель виден только в прилипшем состоянии (.footerStuck).
  &::before {
    pointer-events: none;
    content: '';

    position: absolute;
    inset: 0;

    border-top: base.$sn-primitive-strokeWeight-strokeRegular solid base.$sn-theme-color-neutral-decor;
    border-radius: inherit;

    opacity: 0;

    /* stylelint-disable-next-line declaration-property-value-allowed-list */
    transition: opacity 0.15s ease;
  }
}

.footerStuck {
  &::before {
    opacity: 1;
  }
}

// Невидимый sentinel-элемент 1×1px для IntersectionObserver.
.footerSentinel {
  pointer-events: none;

  position: absolute;
  // Отсчёт идёт от слота содержимого Block'а — опускаем sentinel на нижнюю кромку карточки.
  bottom: calc(0px - $card-padding);
  left: 50%;
  transform: translateX(-50%);

  width: base.$sn-primitive-dimension-2;
  height: base.$sn-primitive-dimension-1;
}

.mainActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
}

.sideItems {
  position: sticky;
  top: base.$sn-density-spacing-interval-l;

  display: flex;
  flex-direction: column;
  gap: base.$sn-primitive-dimension-4;
  align-self: flex-start;
  // 304px — фиксированная ширина боковой колонки, токена нет.
  width: 304px;
}