@macrostrat/map-interface 0.0.1

package/dist/index.css.map

@@ -0,0 +1 @@
+{"mappings":"AAAA;;;;;;;AAKE;;;;;AAGA;;;;;;;;;;AAQE;;;;;AAGA;;;;AAEE;;;;AAGN;;;;;;AAOA;EACE;;;;;;;AChCF;;;;;AAKE;;;;AAIF;;;;AAGA;;;;;;;ACZA;;;;AAEE;;;;AAGF;;;;;;;;;AAOE;;;;AAEA;;;;AAGA;;;;AAGF;;;;AAEE;;;;;AAIF;;;;;;;;;;AAQE;;;;AAIE;;;;;AAIJ;;;;;;;;AAQA;EACE;;;;;ACnDF;;;;AAIA;;;;;AAKA;;;;;AAKA;;;;ACbE;;;;AAGF;;;;;;AAIE;;;;;;AAIA;;;;ACTF;;;;;;;;;;AASE;;;;;;AAIE;;;;;;AASF;;;;AAIF;;;;AAGA;;;;;AAIA;;;;;;;;;AAQA;;;;AAGA;;;;;;AAKE;;;;AAGE;;;;;AAIJ;;;;;;AAIE;;;;AAGF;;;;;;;AAMA;;;;;;;AAQE;;;;AAGF;;;;AAGA;;;;;;;;ACtFA;;;;;;;;;;AASA;;;;AAGA;;;;;;;;;AAOE;;;;;;;;AAOE;;;;;AAGA;;;;;AC7BJ;;;;;;;;AAME;;;;;;AAOA;;;;AAGE;;;;AAGF;;;;AAEA;;;;AAEA;;;;AAKE;;;;AAEF;;;;A;;;;;;;;;;A;;;;;AAcA;;;;AAGE;;;;AAEJ;;;;;;AAIE;;;;A;;;;A;;;;A;;;;;A;;;;AAeA;;;;AAGA;;;;;AAGF;;;;;;AAIE;;;;A;;;;AAKA;;;;;;;A;;;;;;;AASF;;;;AAIE;;;;;;AAIA;;;;;AAIA;;;;A;;;;;;;AASA;;;;;;AAIF;;;;;AAGA;;;;AAIE;;;;;;AAIA;;;;A;;;;AAKA;;;;;A;;;;AAQA;;;;AAGA;;;;;AAIE;;;;;AAGF;;;;AAGA;;;;A;;;;AAKA;;;;AAEF;;;;A;;;;AAKE;;;;AAEF;;;;A;;;;AAKE;;;;AAEF;;;;A;;;;A;;;;AAOE;;;;AAEF;;;;;AAGA;;;;;;;;A;;;;A;;;;;;;AAYA;;;;A;;;;;;;;AASA;;;;;;;;;AAQE;;;;AAIA;;;;;;A;;;;;;AAUA;EACA;;;;;;E;;;;;;EASA;;;;EAGA;;;;E;;;;EAGF;;;;;;EAOE;;;;;AAGF;EAGE;;;;;;EAIA;;;;EAGA;;;;EAGE;;;;EAEJ;;;;;;;;E;;;;;EAWI;;;;;EAKF;;;;EAGA;;;;;;;EAME;;;;;E;;;;;EASA;;;;EAGA;;;;EAGI;;;;;A;;;;AAOJ;;;;AAGA;;;;AAGE;;;;AAGJ;;;;AAGE;;;;AAGA;;;;AAGA;;;;AAGA;E;;;;EAIA;;;;;EAGF;;;;;EAKA;;;;E;;;;;E;;;;;;AAWF;EACE;;;;EAEF;;;;E;;;;;AC7WA;;;;;;AAOA;EAIE;;;;;ACXF;;;;;A;;;;;A;;;;;A;;;;A;;;;A;;;;AAgBE;;;;;;;AAKE;;;;;AAGF;;;;;;;;AAMA;;;;A;;;;;;;AAOA;;;;AAGA;;;;AAEE;;;;;AAGF;;;;;;A;;;;;AASE;;;;ACrDJ;;;;;;;;;;;;;;AAYE;;;;;;AAIA;;;;AAEA;;;;A;;;;;;A;;;;;AAgBA;;;;AAGI;;;;;AAGF;;;;;AAIA;;;;AAEE;;;;;;;;;AAOA;;;;AAIJ;;;;A;;;;A;;;;A;;;;A;;;;;A;;;;AAcE;;;;;A;;;;AAKF;;;;;AAIA;;;;AAGA;;;;;;;;A;;;;;;;AAaA;;;;AAEF;;;;AAGE;;;;A;;;;A;;;;AAQE;;;;;;;;;;;AASE;;;;;;;;AAOJ;;;;AAGA","sources":["packages/map-interface/src/context-panel/main.module.sass","packages/mapbox-react/src/main.module.scss","packages/map-interface/src/location-panel/main.module.sass","packages/ui-components/src/util/main.module.scss","packages/ui-components/src/form-controls/main.module.sass","packages/ui-components/src/modal-panel/main.module.sass","packages/ui-components/src/page-layouts/main.module.sass","packages/map-interface/src/main.module.sass","packages/map-interface/src/map-view/main.module.sass","packages/map-interface/src/dev/main.module.sass","packages/map-interface/src/expansion-panel/main.module.sass"],"sourcesContent":[".searchbar-holder\n  transition: margin 300ms\n  display: flex\n  flex-direction: column\n  margin: 0\n  .navbar-holder\n    display: flex\n    flex-direction: row\n  .searchbar\n    width: 100%\n    background-color: var(--panel-background-color)\n    border-radius: 3px\n    padding: 0 5px\n    display: flex\n    flex-direction: row\n    align-items: center\n    :global(.bp4-input-group)\n      flex-grow: 1\n      cursor: text\n    &>*\n      margin-right: 5px\n      &:last-child\n        margin-right: 0\n\n.status-tongue\n  background-color: var(--panel-background-color)\n  margin: 5px\n  margin-top: -12px\n  padding: 0\n  padding-top: 12px\n\n@media screen and (max-width: 768px)\n  .status-tongue\n    max-width: 100vw\n    margin: 0\n    border-radius: 0\n    margin-top: -3px\n",".recenter-button :global(.bp4-icon):first-child {\n  margin-left: -3px;\n  margin-right: -3px;\n}\n.recenter-button.off-center {\n  .recenter-label {\n    display: none;\n  }\n}\n.recenter-button.out-of-padding .recenter-label {\n  opacity: 0.5;\n}\n.recenter-label {\n  display: inline-block;\n  padding-left: 1em;\n  font-style: italic;\n  font-size: 12px;\n}\n",".copy-link-button:global(.bp4-minimal.bp4-button)\n  color: var(--text-subtle-color)\n  svg\n    fill: var(--text-subtle-color)\n\n.location-panel-header\n  padding: 5px\n  display: flex\n  flex-direction: row\n  align-items: center\n  gap: 1em\n  border-bottom: 1px solid var(--panel-rule-color)\n  .spacer\n    flex-grow: 1\n  .left-icon\n    padding: 7px\n\n  .position-controls :global(.bp4-button)\n    font-size: 12px !important\n\n.infodrawer-header-item\n  font-size: 12px\n  :global(.secondary)\n    font-size: 0.9em\n    color: var(--text-subtle-color)\n\n.infodrawer\n  pointer-events: all\n  max-height: 100%\n  max-width: 100%\n  height: fit-content\n  display: flex\n  flex-direction: column\n  overflow: hidden\n  &:global(.bp4-card)\n    padding: 0\n\n  &.loading\n    .infodrawer-body\n      overflow-y: hidden\n      min-height: 70px\n\n.infodrawer-body\n  flex-shrink: 1\n  min-height: 0\n  transition: min-height 0.5s ease\n  overflow-y: scroll\n  position: relative\n\n// TODO: remove this when we have a better way to handle card media queries\n@media screen and (max-width: 768px)\n  .infodrawer\n    border-radius: var(--panel-border-radius, 0px)\n",".json-view-container.root-hidden {\n  padding-left: 0.8em;\n}\n\n.flex-row {\n  display: flex;\n  flex-direction: row;\n}\n\n.flex-col {\n  display: flex;\n  flex-direction: column;\n}\n\n.flex-spacer {\n  flex: 1;\n}\n",".mui-slider-disabled\n  .bp4-slider-handle\n    display: none\n\n.nullable-slider\n  display: flex\n  flex-direction: row\n  align-items: center\n  .bp4-slider\n    flex-grow: 1\n    margin-right: 1em\n    margin-left: 1em\n  .controls\n    margin-top: -22px\n","\n$c1: rgb(16, 22, 26)\n\n.panel-header\n  background-color: var(--panel-secondary-background-color, #eee)\n  display: flex\n  flex-direction: row\n  justify-content: space-between\n  align-items: center\n  padding: 0.2em 0.6em\n  border-bottom: 1px solid var(--panel-rule-color, #ddd)\n\n  h1\n    margin-bottom: 0.2em\n    margin-top: 0.2em\n    font-size: var(--panel-header-font-size, 1.2em)\n    &.overflow-hidden\n      white-space: nowrap\n      overflow: hidden\n      text-overflow: ellipsis\n\n  // \\:global(.bp4-button)\n  //   align-self: center\n\n:global(.bp4-dark)\n  .panel, .content-panel\n    $c2: rgb(255, 255, 255)\n    box-shadow: 0 0 0 1px rgba($c2, 0.2), 0 0 0 rgba($c2, 0), 0 1px 1px rgba($c2, 0.4)\n\n.expander\n  flex-grow: 1\n\n.panel-column\n  flex-grow: 1\n  position: relative\n\n.panel,.content-panel\n  overflow: hidden\n  box-shadow: 0 0 0 1px rgba($c1, 0.2), 0 0 0 rgba($c1, 0), 0 1px 1px rgba($c1, 0.4)\n  border-radius: 6px\n  background-color: var(--panel-background-color, #fff)\n  display: flex\n  flex-direction: column\n\n.content-panel\n  padding: 0.5em\n\n.panel\n  flex-shrink: 1\n  height: 100%\n  max-height: 100vh\n\n  &.minimal\n    border-radius: 0\n    //box-shadow: none\n    .panel-content\n      padding: 0\n      border-radius: 0\n\n.panel-content\n  overflow-y: scroll\n  padding: 1em\n  flex: 1\n  &>:last-child\n    margin-bottom: 1em\n\n.panel-outer\n  display: flex\n  flex-direction: column\n  position: relative\n  max-height: 100%\n\n.panel-container-inner\n  position: absolute\n  top: 2em\n  bottom: 2em\n  left: 1em\n  right: 1em\n  display: flex\n  flex-direction: column\n  .expander\n    flex: 1\n\n.extra-space\n  width: 1em\n\n.panel-container\n  position: sticky\n  height: 100vh\n  top: 0\n  display: flex\n  flex-direction: column\n",".user-interface\n  position: absolute\n  width: 100%\n  height: 100%\n  top: 0\n  display: flex\n  flex-direction: column\n  overflow: hidden\n\n.spacer\n  width: 1em\n\n.three-column\n  display: flex\n  flex: 1\n  flex-direction: row\n  position: relative\n  height: 100%\n  overflow: hidden\n  &>div\n    min-width: 50px\n    height: 100%\n    //max-width: 50%\n    position: relative\n    overflow-y: scroll\n    flex-shrink: 1\n    &.main-column\n      flex-grow: 1\n      max-width: 100%\n    &.context-column.expanded\n      flex-grow: 2\n      max-width: 100%",".map-page\n  display: flex\n  flex-direction: column\n  position: relative\n  width: 100%\n  height: 100%\n  &.fit-viewport\n    height: 100vh\n    width: 100vw\n    /* mobile viewport bug fix */\n    max-height: -webkit-fill-available\n\n  // Compass display\n  .compass-control\n    display: none\n  &.map-is-rotated\n    .compass-control\n      display: block\n\n  .map-3d-control\n    display: none\n  &.map-3d-available .map-3d-control\n    display: block\n  &.map-is-rotated.map-3d-available .map-3d-control\n    display: none\n\n  .globe-control\n    display: none\n    svg\n      color: var(--secondary-color)\n  &.map-is-global .globe-control\n    display: block\n\n.main-ui\n  flex: 1\n  position: relative\n  display: flex\n  flex-direction: column\n  max-height: 100%\n  height: 100%\n  box-shadow: 0 0 10px 4px var(--card-shadow-color)\n\n.panel-card\n  padding: 10px\n  background-color: var(--panel-background-color)\n\n  & >:last-child\n    margin-bottom: 0\n\n:global(.bp4-dark) .panel-card\n  background-color: var(--panel-background-color)\n\n.context-stack\n  display: flex\n  flex-direction: column\n  max-height: 100%\n\n  &>div\n    flex-shrink: 1\n\n  &>.searchbar\n    flex: 0\n\n.context-stack,\n.detail-stack\n  z-index: 100\n\n.panel-container\n  display: flex\n  flex-direction: column\n\n  &>div\n    pointer-events: all\n\n.panel-title\n  font-size: 16px\n\n.spacer\n  flex-grow: 1\n  pointer-events: none\n\n.map-view-container\n  flex-grow: 1\n  position: relative\n  overflow: hidden\n\n.searchbar-holder\n  margin-bottom: 0.5em\n\n.right-panel\n  width: 24em\n\n.buttons\n  display: flex\n  flex-direction: row\n  flex: 1\n  min-width: 0\n\n.tab-button\n  flex-shrink: 1\n  min-width: 40px\n  overflow: hidden\n  text-align: right\n\n  & :global(.bp4-button-text)\n    transition: all 0.2s\n    transition-delay: 0.1s\n\n  .menu-card.narrow-card .panel-header:not(.minimal) &:global(.bp4-active) ~ & :global(.bp4-button-text)\n    width: 0\n    opacity: 0\n    margin-left: -7px\n\n  .context-panel-leave .menu-card .panel-header & :global(.bp4-button-text)\n    opacity: 0\n    width: 0\n\n.narrow-card.narrow-enter .panel-header .buttons\n  margin-right: -500px\n\n.panel-header.minimal .tab-button:not(:hover):not(:global(.bp4-active))\n  padding-left: 0\n  padding-right: 0\n  min-width: 30px\n  width: 30px\n\n.panel-header.minimal .tab-button:not(:hover) :global(.bp4-button-text)\n  width: 0\n  opacity: 0\n  margin-left: -7px\n\n.menu-group\n  margin-bottom: 0.5em\n  margin-top: 0.2em\n\n.menu-card :global .bp4-text ul,\n.menu-card :global .text-panel ul\n  padding-left: 1em\n\n.menu-content\n  display: flex\n  flex-direction: column\n  margin-bottom: -8px\n\n  & .bp4-button-group\n    margin-bottom: 4px\n\n  & hr\n    width: 100%\n\n:global #map\n  position: absolute\n  top: 0\n  bottom: 0\n  left: 0\n  right: 0\n\n:global #map .mapbox-compass,\n:global #map .mapbox-3d\n  display: none\n\n:global .mapboxgl-ctrl.mapbox-3d.mapbox-control\n  width: unset\n\n:global .mapboxgl-ctrl.mapbox-3d.mapbox-control button\n  width: unset\n  padding-inline: 4px\n\n:global .mapboxgl-canvas-container\n  width: 100%\n  height: 100%\n\n:global .mapboxgl-ctrl.mapboxgl-ctrl-attrib\n  background-color: var(--translucent-panel-background-color) !important\n\n:global .mapboxgl-ctrl.mapboxgl-ctrl-attrib a\n  color: var(--text-color)\n\n:global .mapboxgl-marker svg path\n  fill: var(--panel-background-color) !important\n\n:global .mapboxgl-marker svg circle\n  fill: var(--secondary-color) !important\n\n:global .mapbox-control.mapbox-zoom\n  background: var(--translucent-panel-background-inner)\n\n:global .mapbox-control.mapbox-zoom svg\n  fill: var(--text-color) !important\n\n:global .mapboxgl-ctrl-logo\n  transform: scale(0.9) translate(-8px, 2px)\n\n:global .bp4-dark .mapboxgl-ctrl-logo\n  filter: invert(100%)\n\n:global .mapboxgl-ctrl-group button + button\n  border-top: 1px solid var(--panel-rule-color) !important\n\n:global .bp4-dark .mapboxgl-ctrl-group .mapboxgl-ctrl-icon\n  filter: invert(40%)\n\n:global .bp4-dark .mapboxgl-ctrl-group .mapboxgl-ctrl-icon:hover\n  filter: invert(50%)\n\n:global .mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon\n  filter: invert(40%)\n\n:global .mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon:hover\n  filter: invert(50%)\n\n.detail-stack\n  position: relative\n\n.main-ui.detail-panel-open .zoom-control\n  opacity: 0\n  display: none\n\n.zoom-control\n  transition: opacity 1s ease-in-out\n  width: 30px\n  position: absolute\n  top: 0\n  right: 0\n\n.main-ui.searching .map-view-container\n  pointer-events: none\n\n.map-controls\n  display: flex\n  flex-direction: row\n  justify-content: right\n  margin-bottom: 0\n\n  &>*\n    margin-left: 0.5em\n\n.map-controls :global(.mapbox-control),\n.map-controls :global(.map-control-wrapper),\n.map-controls .map-control\n  min-width: 22px\n  min-height: 22px\n  border-radius: 4px\n  background-color: var(--panel-background-color)\n  box-shadow: 0 0 0 1px var(--card-shadow-color)\n\n.map-controls :global(.mapbox-control) button,\n.map-controls :global(.map-control-wrapper) button,\n.map-controls .map-control button\n  width: 22px\n  height: 22px\n  background-position: center center\n  padding: 0\n  background-color: var(--panel-background-color)\n  color: var(--text-color)\n\n.map-controls :global(.mapbox-control) button:hover,\n.map-controls :global(.map-control-wrapper) button:hover,\n.map-controls .map-control button:hover\n  background-color: var(--panel-background-color) !important\n\n.map-controls .map-scale-control\n  background: none\n  box-shadow: none\n  padding-top: 8px\n\n  :global(.mapboxgl-ctrl-scale)\n    background-color: var(--translucent-panel-background-color)\n    border-color: var(--secondary-text-color)\n    color: var(--secondary-text-color)\n\n/* For mobile phones, we want to make the most of screen space,\n which in some cases means adding complications to the basic page. */\n@media only screen and (max-width: 768px)\n  .main-ui.detail-panel-enter .context-stack\n    height: 0\n    visibility: hidden\n    transition: height 0.5s ease-in-out\n\n  .detail-stack\n    height: fit-content\n    position: inherit\n    max-height: 70%\n\n  .infodrawer-stack\n    max-height: 70%\n\n  :global(.exit-active)\n    max-height: 0\n\n  :global(.mapbox-control.mapbox-zoom)\n    display: none\n\n  .map-controls\n    position: absolute\n    top: -60px\n    right: 10px\n\n  .detail-panel\n    border-radius: 0px\n\n/* Desktop styling is necessarily much more complicated than mobile\n to handle a two-column layout. */\n@media screen and (min-width: 768px)\n  .main-ui\n    flex-direction: row\n    padding: 1em 1em 2em\n    min-height: 80px\n    &>*\n      margin-right: 0.5em\n      &>*:last-child\n        margin-right: 0\n\n    &.searching .context-stack\n      width: 24em\n\n  .context-stack\n    max-width: 34em\n    min-width: 14em\n    width: 16em\n    transition: width 300ms ease\n    padding-bottom: 0.5em\n\n    &.panel-open\n      width: 34em\n      margin-right: 0.5em\n\n  .context-stack.layers,\n  .context-stack.settings\n    width: 18em\n    margin-right: 0.5em\n\n  .main-ui.detail-panel-open .detail-stack\n    width: 30em\n\n  .detail-stack\n    width: 30em\n    pointer-events: none\n    display: flex\n    flex-direction: column\n\n  .context-stack,\n  .detail-stack\n    pointer-events: none\n    z-index: 100\n\n  .context-stack>div,\n  .detail-stack>div\n    pointer-events: all\n    margin-bottom: 0.5em\n\n  .context-stack>div:last-child,\n  .detail-stack>div:last-child\n    margin-bottom: 0\n\n  .context-stack>div.spacer,\n  .detail-stack>div.spacer\n    pointer-events: none\n\n  .map-view-container\n    position: unset\n\n.main-ui .detail-panel\n  transition: opacity 0.8s ease, height 0.8s ease, max-height 0.8s ease\n\n.main-ui.detail-panel-from .detail-panel\n  opacity: 0\n\n.main-ui.detail-panel-enter .detail-panel\n  opacity: 1\n\n.main-ui.detail-panel-leave .detail-panel\n  opacity: 0\n\n.main-ui .context-panel\n  transition: opacity 0.8s ease, height 0.8s ease, max-height 0.8s ease\n\n.main-ui.context-panel-from .context-panel\n  opacity: 0\n\n.main-ui.context-panel-enter .context-panel\n  opacity: 1\n\n.main-ui.context-panel-leave .context-panel\n  opacity: 0\n\n@media only screen and (max-width: 768px)\n  .main-ui .detail-stack\n    transition: opacity 0.8s ease, height 0.8s ease, max-height 0.8s ease\n\n  .main-ui.detail-panel-from .detail-stack\n    max-height: 0\n    height: 0\n\n  .main-ui.detail-panel-leave .detail-stack\n    max-height: 0\n    max-height: 0\n\n  .main-ui .context-panel\n    transition: opacity 0.8s ease, height 0.8s ease, max-height 0.8s ease\n\n  .main-ui.context-panel-from .context-panel\n    max-height: 0\n    height: 0\n\n  .main-ui.context-panel-leave .context-panel\n    max-height: 0\n    max-height: 0\n\n// Shift UI around to center elements if we're in the global view \n@media only screen and (min-width: 768px)\n  .map-page .main-ui.detail-panel-leave .map-view-container\n    margin-right: -14em\n\n  .map-page.map-is-global .main-ui.detail-panel-leave .map-view-container\n    margin-right: -30em\n\n  .map-page.map-is-global .main-ui.context-panel-leave .map-view-container\n    margin-left: -16em\n",".map-view-container\n  flex-grow: 1\n  position: relative\n  overflow: hidden\n\n/* Desktop styling is necessarily much more complicated than mobile\n to handle a two-column layout. */\n@media screen and (min-width: 768px)\n  /* Make map fill page rather than containing div,\n   by unsetting map position */\n  // We should move this to another file.\n  .map-view-container\n    position: unset\n",".feature-panel\n  position: relative\n  overflow-x: hidden\n\n.key-value\n  display: inline-block\n  margin-right: 1em\n  .key\n    font-weight: bold\n    font-size: 0.9em\n    &:after\n      content: ': '\n  .value\n    font-size: 0.9em\n\n.feature-properties\n  position: relative\n  &:before\n    content: \"–\"\n    position: absolute\n    top: 4px\n    left: 0\n\n.feature-header h3\n  margin-bottom: 0\n  margin-top: 0.5em\n\n.feature-group\n  border-bottom: 1px solid var(--panel-rule-inner)\n  padding: 0 1em\n  margin-left: -1em\n  margin-right: -1em\n  margin-bottom: 0.5em\n  &:last-child\n    border-bottom: none\n\n.tile-info\n  display: flex\n  flex-direction: row\n  align-items: baseline\n  padding: 0 1em\n  h3\n    margin-right: 0.5em\n\n.opacity-slider\n  margin: 0 1em 0.5em\n  :global\n    .bp4-slider-handle .bp4-slider-label\n      background-color: var(--secondary-color)\n      color: var(--text-color)\n\n.unit-number\n  .unit\n    font-size: 0.9em\n    margin-left: 0.2em\n    font-weight: bold\n\n.page\n  margin: 2em auto\n  max-width: 50em\n\n.dev-index-page\n  overflow-y: scroll\n","\n.panel-subhead\n  padding: 0.2em var(--box-horizontal-padding)\n  border-top: 1px solid var(--accent-border-color)\n  border-bottom: 1px solid var(--accent-border-color)\n  background-color: var(--accent-color)\n  display: flex\n  flex-direction: row\n  align-items: center\n  z-index: 1\n  gap: var(--box-horizontal-padding)\n  top: 0px\n  position: sticky\n  h1, h2, h3, h4\n    font-family: Montserrat,sans-serif\n    font-weight: 700\n    margin: 0.2em 0\n  h4\n    font-weight: 600\n  .title\n    flex-grow: 1\n\n// :global(.bp4-dark) .panel-subhead\n//   margin 0 1px\n\n.expansion-panel\n  padding: 0\n  flex-wrap: wrap\n  margin-top: -1px\n  // &.collapsed\n  //   .expansion-panel-header\n  //     border-bottom-width: 0;\n\n.sub-expansion-panel\n  margin: -1px calc(var(--panel-padding-h) * -0.5) 0\n  overflow: hidden\n  &:first-child\n    .expansion-panel-header\n      border-top-width: 0\n  .panel-subhead\n    border-top: none\n    border-bottom: none\n\n  .expansion-panel-header\n    background-color: var(--accent-secondary-color)\n    cursor: pointer\n    &:hover\n      background-color: var(--accent-secondary-hover-color)\n    h2, h3, h4\n      font-weight: 500\n      border-bottom: 1px solid var(--tertiary-border-color)\n      border-top: 1px solid var(--tertiary-border-color)\n      margin-top: -1px\n      padding: 5px 1em 5px\n      align-items: center\n\n.expansion-summary-title-help\n  margin-left: 5px\n  :global(.bp4-icon)\n    margin-left: 5px\n\n.expansion-panel-header\n  cursor: pointer\n  &:hover\n    background-color: var(--accent-hover-color)\n  :global(.bp4-icon)\n    transform: translate(0,3px)\n\n.expansion-children\n  padding: 5px 1em 10px\n  .expansion-panel\n    margin-left: -1em\n    margin-right: -1em\n    &:first-child\n      margin-top: -5px\n\n.expansion-panel-subtext\n  font-size: 85%\n  font-weight: 400\n\n:global\n  .expansion-panel-root\n    padding-left: 15px !important\n\n  .expansion-panel-detail\n    display: block !important\n    padding: 0 !important\n\n  .expansion-panel-detail-sub\n    display: block !important\n\n// New expandable panel for details\n.expandable-details-main\n  display: flex\n  flex-direction: row\n  align-items: center\n  justify-content: space-between\n  margin: 3px 0\n\n.expandable-details-header\n  display: inline-flex\n  flex-direction: row\n  align-items: baseline\n  flex-grow: 1\n\n.expandable-details-children\n  position: relative\n\n.expandable-details-toggle\n  :global(.bp4-button)\n    font-size: 10px\n\n.expandable-details\n  &.macrostrat-unit\n    .title:after\n      content: none\n  .title\n    margin-right: 1em\n    &:after\n      content: \":\"\n\n.expansion-body\n  display: inline-block\n  //flex-direction row\n  align-items: baseline\n  background-color: var(--tertiary-background)\n  padding: 2px 6px\n  border-radius: 4px\n  width: 100%\n  box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.2)\n  margin-bottom: 6px\n\n.expansion-panel-detail-header\n  font-size: 90%\n  font-style: italic\n  margin-right: 1em\n  display: inline\n  color: var(--secondary-color)\n  &:after\n    content: \":\"\n\n.expansion-panel-detail-body\n  display: inline\n"],"names":[],"version":3,"file":"index.css.map"}