@use 'pix-design-tokens/typography';
@use '../../styles/pages/module';
@use './passage';

.module-preview {
  @extend .modulix;

  display: grid;
  grid-template-columns: 1fr;

  &--with-editor {
    grid-template-columns: 2fr 1fr;
  }

  &__buttons {
    display: flex;
    gap: var(--pix-spacing-2x);
    justify-content: flex-end;
    padding: var(--pix-spacing-3x);
  }

  &__passage {
    width: 100%;
  }

  &__form {
    @extend %pix-monospace;

    position: sticky;
    top: 0;
    height: 84vh;
    margin: var(--pix-spacing-12x) var(--pix-spacing-2x);

    .pix-textarea {
      height: 100%;
    }
  }
}

.module-preview-passage {
  &__title {
    @extend .module-passage__title;
  }

  &__content {
    @extend .module-passage__content;
  }
}

.module-preview-form {
  &__textarea {
    height: 100%;
  }
}

.module-preview-passage-content-section {
  @extend %pix-title-xs;

  display: flex;
  gap: var(--pix-spacing-2x);
  align-items: center;
  width: 100%;
  padding: var(--pix-spacing-4x);
  background-color: var(--pix-primary-100);
  border-radius: var(--pix-spacing-4x);
}
