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

body.items-show
  #item-header
    border-bottom: 1px solid $module-border-color
    margin-bottom: 1em
    padding: 1em 0

    display: grid
    grid-template-areas: "img gap1" "img name" "img links" "img gap2"
    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%
      
    #item-links
      grid-area: links
      text-align: left
      a
        font-size: 75%
        margin-left: 1em
    
  #item-name
    margin-bottom: 0
    
  #item-zones
    font:
      family: $text-font
      size: 85%
    margin-bottom: 1em

    p
      display: inline

      &:first-child
        margin-right: 1em
        
  #trade-hangers
    font-size: 85%
    margin-bottom: 3em
    text-align: left

    p
      position: relative

      &:first-child
        margin-bottom: .5em

      &.overflows
        .toggle
          display: block

      &.showing-more
        .toggle
          .less
            display: block

          .more
            display: none

    .toggle
      background: white
      bottom: 0
      cursor: pointer
      display: none
      font-family: $main-font
      padding: 0 1em
      position: absolute
      right: 0

      &:hover
        text-decoration: underline

      .less
        display: none
  
  #item-contributors
    +subtle-banner
    clear: both
    margin:
      bottom: 0
      top: 2em
    
    header
      display: inline
      font-weight: bold
      margin-right: .25em
    
    footer
      display: inline
    
    ul
      li::after
        content: ", "
      
      li:last-child::after
        content: "."
    
  .nc-icon
    height: 16px
    width: 16px

  #closet-hangers
    border: 1px solid $module-border-color
    float: right
    font-size: 85%
    margin-bottom: 3em
    margin-left: 1em
    padding: 1em
    width: 30em
    
    // compete with #trade-hangers
    position: relative
    z-index: 2

    h3
      font-size: 150%
      font-weight: bold
      margin-bottom: .25em
    
    #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

  &.js
    #trade-hangers
      p
        max-height: 3em
        overflow: hidden

        &.showing-more
          max-height: none