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

body.items-show
  .item-header
    +item-header

  #item-info-section
    display: grid

    grid-template-areas: "info form"
    grid-template-columns: 1fr auto

    #item-info
      grid-area: info

    #your-items-form
      grid-area: form

      border: 1px solid $module-border-color
      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
          
    #trade-hangers
      font-size: 85%
      margin-bottom: 3em
      text-align: left

      p
        position: relative

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

        &[data-overflows]
          overflow: hidden
          .toggle
            display: block

        &[data-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

        button
          +reset-awesome-button
          &: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

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

        &.showing-more
          max-height: none