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

=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 lists" "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
      flex-wrap: wrap
      gap: 1em

      abbr
        cursor: help

      .item-kind, .first-seen-at
        padding: .25em .5em
        border-radius: .25em

        text-decoration: none
        font-weight: bold
        line-height: 1

        background: #E2E8F0
        color: #1A202C

        .icon
          vertical-align: middle
      
      .item-kind
        // 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?
        // NOTE: For the data-type=np case, we use the default gray colors.
        &[data-type=nc]
          background: #E9D8FD
          color: #44337A
        &[data-type=pb]
          background: #FEEBC8
          color: #7B341E

    .support-form
      grid-area: support
      font-size: 85%
      text-align: left

    .user-lists-info
      grid-area: lists
      font-size: 85%
      text-align: left

      display: flex
      gap: 1em

      a::after
        content: " ›"

  .user-lists-form
    background: $background-color
    border: 1px solid $module-border-color
    border-radius: .5em
    padding: 1em
    width: 30em
    text-align: center
    z-index: 2
    margin-top: .5em
    margin-inline: auto
    margin-bottom: 1.5em
    font-size: 85%

    h3
      font-size: 150%
      font-weight: bold
      margin-bottom: .75em
    
    .closet-hangers-ownership-groups
      +clearfix
      margin-bottom: .5em
    
      div
        float: left
        margin: 0 5%
        text-align: left
        width: 40%
        
        li
          list-style: none
          word-wrap: break-word
          
          label.unlisted
            font-style: italic

    form
      padding: .5em 0

    select
      width: 9em

    input[type=number]
      margin-right: .5em
      width: 3em

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

  .item-subpages-nav
    display: flex
    align-items: flex-end
    gap: 1em

    .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
      background: $module-bg-color
      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: $background-color
        padding-bottom: calc(.5em + 1px)
        font-weight: bold
        margin-bottom: -1px