#storybook-root {
  --viewport-height: auto;
}

app-ag-grid-stories {
  display: block;
  width: var(--viewport-width);

  .scrollable {
    overflow: auto;
    position: relative;
  }

  .grid {
    display: grid;
    grid-template-areas:
      'row-delete validation'
      'back-to-top validation';
    grid-template-columns: 600px 580px;
    grid-template-rows: 160px 160px;
    grid-gap: 20px;

    #back-to-top {
      grid-area: back-to-top;
    }

    #row-delete {
      grid-area: row-delete;
    }

    #validation {
      grid-area: validation;
    }
  }
}

.sky-theme-modern {
  app-ag-grid-stories {
    .grid {
      grid-template-rows: 220px 300px;
    }
  }
}
