@use 'apps/dashboard/src/variables' as *;
@use '../../common-form';

$vertical-gap: rhythm(4);
$header-height: rhythm(10) + rhythm(1) + $vertical-gap * 2;

.widget-form-page {
  display: flex;
  flex-direction: column;
  gap: $vertical-gap;
  padding-bottom: 0;

  .page-header {
    display: flex;
    justify-content: space-between;
  }

  .action-container {
    display: flex;
    gap: rhythm(1);
  }

  .widget-form-page-body {
    display: flex;
    gap: rhythm(6);

    .widget-form-container {
      display: flex;
      flex-direction: column;
      flex: 0 0 auto;
      gap: rhythm(4);
      padding-right: rhythm(4);
      width: rhythm(53);
    }
    .widget-preview-container {
      flex: 1;
    }
    .widget-form-container,
    .widget-preview-container {
      height: calc(100vh - var(--app-topbar-height) - var(--app-layout-padding-top) - #{$header-height});
      overflow-y: auto;
    }
  }

  .widget-preview-container {
    padding-bottom: var(--app-layout-padding-bottom);
    .title-xs {
      color: $color-neutral-regular;
      margin-bottom: rhythm(2);
    }

    &.dark-mode {
      background: #1f2023;
      .title-xs {
        color: $color-neutral-light;
      }
    }

    .preview-content {
      --custom-height-container: calc(
        100vh - var(--app-topbar-height) - var(--app-layout-padding-top) - var(--app-layout-padding-bottom) - #{rhythm(
            24
          )}
      );

      display: flex;
      flex: 1;
      flex-direction: column;
      gap: rhythm(4);
    }
  }
}
