/* --- General item sizing  ----------------------------------- */

/*
  This makes sure the grid page container takes up the full width of the page,
  regardless of any inline padding on its parent element. We're doing this on
  the grid-container so we're not tied to whatever wrapper we happen to use to
  put around it
*/
#gridlayout-grid-page {
  margin-inline: calc(50% - 50vw);
  display: grid;
  grid-template-areas:
    "header   header header"
    "lsidebar body   rsidebar"
    "footer   footer footer";
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto 1fr auto;
}

#gridlayout-grid-page > .grid-container {
  grid-area: body;
}

#gridlayout-grid-page > .grid-page-header {
  grid-area: header;
  font-size: 1.5rem;
  padding: 5px;
}

.grid-page-header > * {
  margin-block: 0;
}

#gridlayout-grid-page > .grid-page-sidebar-left {
  width: 250px;
  grid-area: lsidebar;
}
#gridlayout-grid-page > .grid-page-sidebar-right {
  width: 250px;
  grid-area: rsidebar;
}

.grid-page-header,
.grid-page-sidebar-left,
.grid-page-sidebar-right {
  padding: 10px;
}

.grid-container {
  --undo-gap: calc(-1 * var(--grid-gap));
}

.grid-container > * {
  box-sizing: border-box;
  margin: 0;
}

/* If we just use 1fr for the content, then it can
sometimes overflow and cause the cell to be larger
than it should. Not totally sure why but this
css-tricks article contained the solution:
https://css-tricks.com/preventing-a-grid-blowout/ */
.grid-container > * {
  min-width: 0;
  min-height: 0;
}

/* Scrollable cards: 
If the user has allowed scrollable cards then we need to set
the overflow accordingly. 
*/
div[data-scrollable="TRUE"] .panel-content {
  overflow: scroll;
}

/* Since we're in the world of flex, the height value is entirely ignored so in
order to keep the plots sized how we expect them to, we need to not let flex do
it's shrink magic on them */
div[data-scrollable="TRUE"] .shiny-plot-output {
  flex-shrink: 0;
}

.grid-container .shiny-plot-output > img {
  /* The way grid sizing works can throw off the plot sizing in shiny. This
     is because the size of the parent grows to its largest child element.
     Shiny's plot output uses fixed pixel sizing. Shiny tries to update
     these sizes by looking at the parent div's dimensions after a resize.
     When the window has been made smaller, this means that the parent
     element is spilling outside of its box because the plot image size is
     still sitting at a fixed pixel width of the previous size. So when Shiny
     queries the size of the parent it thinks that nothing has changed. By
     setting a max width and height, we make sure the plot always gets shrunk
     to at most the size of the grid element, thus allowing the resize observer
     to work properly.
  */
  max-width: 100%;
  max-height: 100%;
}

/* Add ability to turn off padding of the body of card for things like nested
grids where the padding is already provided by the child element */
.grid-container div.card.no-pad .card-body {
  padding: 0;
}

/* --- Grid Panels ------------------------------------------- */

.grid_card {
  --card-padding: 0.8rem;

  overflow: hidden;
  display: grid;
  grid-template-areas:
    "title"
    "content";
  /* The content-height variable gets over-written to enable collapsible cards*/
  /* When there's no title the column will dissapear */
  grid-template-rows: min-content minmax(0, var(--content-height, 1fr));
}

/* --- Optional Title Bar ----------------------------------- */
.grid_card .card-header {
  grid-area: title;
  display: flex;
  justify-content: start;
  align-items: center;
}

/* --- Panel Content ---------------------------------------- */
/* This is the div that actually holds the children of the panel */

.panel-content {
  padding: var(--card-padding);
  grid-area: content;
}

/* --- Collapsing ------------------------------------------ */
/* Panels that can be collapsed control their size with a toggle switch */

.grid_card.collapsed {
  /* If panel is not collapsible this css variable is defined as "block"
     which means that a panel that has been collapsed, and then resized
     to a scenario where it cant be collapsed, it will pop back
  */
  --content-height: var(--collapsed-content-size);
  height: var(--collapsed-panel-height);
  overflow: var(--collapsed-panel-overflow);
}

/* Make flip arrow point down when collapsed and
   up when expanded to show result of clicking */
.grid_card .collapser-icon {
  display: var(--collapsible-visibility, none);
}
.grid_card .collapser-icon svg {
  transition: transform 0.2s ease;
}
.grid_card.collapsed .collapser-icon svg {
  transform: scaleY(-1);
}

/* --- Vertical Stack Panels -------------------------------- */
/* These are panels that have a column-flex layout for nicely stacking a bunch
of children on top of eachother */
.grid_card.vertical_stack .panel-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/*
  Add a margin to the bottom of each element except the last. This essentially
  replicates the gap property but has better browser support
*/
.grid_card.vertical_stack .panel-content > *:not(:last-child) {
  margin-bottom: var(--item-gap, 1rem);
}

/* --- Text Panels -------------------------------- */
/* A special panel that simply holds some text (and optional icon) that can be
aligned easily */

/* Make everything line up nice and cleanly like it should in the middle */
.grid_card_text {
  margin: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Everything should be inline so lining up works properly */
.grid_card_text * {
  display: inline;
}
/* Make sure logo isn't right up next to the text */
.grid_card_text > * {
  margin: 0 5px;
}

/* --- Tabset Panel work -------------------------------- */
/* Makes it so tabpanels work in gridpanels */
.grid_card .tabbable {
  height: 100%;
  width: 100%;
}
.grid_card .tabbable > .nav {
  height: 42px;
}
.grid_card .tabbable .tab-content {
  height: calc(100% - 42px);
}
.grid_card .tabbable .tab-pane {
  height: 100%;
}