impress/app/assets/stylesheets/partials/_item_header.sass

@import "../partials/clean/constants"

=item-header
  border-bottom: 1px solid $module-border-color
  margin-top: 1em
  margin-bottom: 1em

  .item-header-main
    display: grid
    grid-template-areas: "img gap1" "img name" "img links" "img gap2" "nav nav"
    align-items: center
    justify-content: center
    column-gap: 1em
    row-gap: .5em

    .item-thumbnail
      grid-area: img

      border: 1px solid $module-border-color
      height: 80px
      width: 80px

    .item-name
      grid-area: name

      text-align: left
      line-height: 100%
      margin-bottom: 0
      
    .item-links
      grid-area: links

      font-size: 85%
      text-align: left
      display: flex
      align-items: center
      gap: 1em
      
      .item-kind
        padding: .25em .5em
        border-radius: .25em
        cursor: help

        font-weight: bold
        line-height: 1

        // These colors are copied from DTI 2020, for initial consistency!
        // They're based on the Chakra UI colors, which I think are in turn the
        // Bootstrap colors? Or something?
        &[data-type=nc]
          background: #E9D8FD
          color: #44337A
        &[data-type=pb]
          background: #FEEBC8
          color: #7B341E
        &[data-type=np]
          background: #E2E8F0
          color: #1A202C


  .item-description
    margin-top: .5em
    margin-bottom: 1em

  .item-subpages-nav
    display: flex
    align-items: flex-end

    .preview-link
      margin-right: auto

    .trades-section
      display: flex
      gap: .5em

      header
        align-self: center
        font-weight: bold

        &::after
          content: ":"

      ul
        align-self: flex-end
        list-style: none
        display: flex
        gap: .5em

        li
          display: block

    a
      display: block
      border: 1px solid $module-border-color
      border-bottom: 0
      border-radius: .5em .5em 0 0
      padding: .5em 1em
      text-decoration: none

      &:hover, &:focus
        text-decoration: underline

      &[data-is-current=true]
        background: $module-bg-color
        font-weight: bold