$panel-header-logo-width: 85%

.dashboard-wrapper
  .banner-version-warning
    display: none
  .dashboard-main
    .article
      +desktop
        // this is the height of the navbar only
        max-height: calc(100vh - 3.5rem)
        overflow: scroll
.dashboard-wrapper.showing-banner-version-warning
  .banner-version-warning
    display: block
  .dashboard-main
    .article
      +desktop
        // this is the height of the navbar and warning banner
        max-height: calc(100vh - 10.5rem)

=flex
  display: flex

=row
  +flex
  flex-direction: row

=column
  +flex
  flex-direction: column

.dashboard
  +row
  position: relative
  overflow: hidden

  .is-scrollable
    overflow-y: auto

  &-main
    flex: 1

  &-panel
    +column
    flex: 0 0 20%

    &-header
      margin-bottom: 1.5rem

      &-logo
        width: $panel-header-logo-width
        margin: 0.5rem auto 0.5rem auto

    &-content
      +desktop
        margin: 0 2rem
        padding-bottom: 2rem
      +touch
        margin: 0 1rem

.integration-index
  +flex
  +row
  flex-wrap: wrap
  justify-content: left
  padding-left: 1rem
  padding-top: 1rem

.ecosystem-navbar
  padding-top: 0.5rem
  padding-right: 4rem
  padding-left: 1rem
  min-width: 100%

.ecosystem-container
  display: block
  width: 100%

.integration-item
  +flex
  flex: 0 0 10%
  margin: 1rem
  min-width: 220px

.integration-item:hover
  cursor: pointer

.integration-item .image
  padding: 10px
  height: 150px

.integration-item .image img
  width: 100%
  height: 100%
  object-fit: contain

.integration-details
  margin: 1rem
  border-radius: 100px

.integration-details ul > li
  margin-left: 10px

.integration-details ul
  list-style: black

.integration-details-labels
  margin-top: 0
  margin-bottom: 1rem
  padding: 5px

.integration-label-wrapper
  padding-top: 4px
  padding-bottom: 4px
  display: inline-block

.integration-label
  border-radius: 1000px
  padding: 4px 10px
  color: black
  background-color: #aaaaaa

.integration-label-layer
  background-color: #7d9199

.integration-label-category
  background-color: #009900

.integration-label-software
  background-color: #9acd32

.integration-logo
  height: 200px
  border: 1px

//  Work around for bulma css weird jumbo sized default margin-bottom
.title:not(:last-child)
  margin-bottom: 0.2rem

.opa-keep-it-together
  white-space: nowrap

.dropdown-menu .dropdown-content
  max-height: 55vh
  overflow-y: auto

.highlight
  margin-bottom: 1.5rem // matches what live-blocks does

.dashboard-wrapper
  display: flex
  flex-flow: column
  height: 100%
  max-height: 100vh

.dashboard
  flex: 1 1 auto

  .navbar
    @media screen and (min-width: 1024px)
      position: sticky
      top: 0

.dashboard-panel-content
  margin: 0 0 0 2rem
  padding: 0 2rem 2rem 0

.banner-version-warning
  // override bulma defaults for messages
  margin-bottom: 0 !important
  border-radius: 0
  font-size: 1.2rem
  font-weight: bold
  border-top: 1rem solid transparent
  border-bottom: 1rem solid transparent
  .message-body
    border: none
    border-radius: 0
    button.delete
      float: right
      margin-top: 0.25rem

  // this is used to make the banner appear in the same position as the page
  // scrolls
  position: sticky
  width: 100%
  z-index: 10

  // different types of message should have different colors. The colors are
  // duplicated from the bulma since we're not using variables
  &.is-danger
    border-image: 50 repeating-linear-gradient(75deg, #cc0f35 0, #cc0f35 1rem, transparent 0, transparent 2rem)
  &.is-warning
    border-image: 50 repeating-linear-gradient(75deg, #946c00 0, #946c00 1rem, transparent 0, transparent 2rem)
  &.is-info
    border-image: 50 repeating-linear-gradient(75deg, #296fa8 0, #296fa8 1rem, transparent 0, transparent 2rem)

.ecosystem-table
  border: 1px solid silver
  border-collapse: collapse
  td, th
    border: 1px solid silver
    padding: 1rem
  th
    font-weight: bold

.ecosystem-breadcrumbs
  color: white
  margin-bottom: 1rem
  a
    color: white
    text-decoration: underline

.ecosystem-note
  color: white
  margin-top: 0.5rem
  p
    color: white

.ecosystem-cta
  color: white
  margin-top: 0.5rem
  border: 3px solid deepskyblue
  background-color: dodgerblue
  padding: 1rem 1.5rem
  border-radius: 0.5rem
  a
    color: white
    text-decoration: underline
    font-weight: bold

.ecosystem-list
  display: grid
  gap: 2rem 1rem
  width: 100%
  margin: 0 auto
  grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr))
  +mobile
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr))

  .ecosystem-list-item
    background-color: white
    padding: 2rem 2rem 1rem
    border-radius: 1rem
    box-shadow: 0px 1px 2px rgba(3, 7, 18, 0.03), 0px 5px 7px rgba(3, 7, 18, 0.05), 0px 12px 15px rgba(3, 7, 18, 0.08)
    display: flex
    flex-direction: column

    .ecosystem-list-item-header
      display: flex
      align-items: center
      margin-bottom: 1rem
      p.title
        margin-bottom: 0.3rem
      figure
        margin: 0 1rem 0 0
        border: 1px solid #e5e5e5
        border-radius: 0.5rem
        padding: 0.2rem

    .ecosystem-list-item-content
      flex-grow: 1

    .ecosystem-list-item-footer
      display: block
      background-color: rgb(0, 141, 156)
      color: white
      font-weight: bold
      font-size: 0.8em
      padding: 0.5rem 0.7rem
      margin: 0.5rem -2rem -1rem 0
      border-radius: 0.7rem 0 1rem 0
      align-self: flex-end
      &:hover
        background-color: rgba(0, 141, 156, 0.8)
