@import "partials/context_button"
@import "partials/icon"

body.closet_hangers-index
  #title
    float: left
    margin-bottom: 0

  .flash
    clear: both

  #import-link, #closet-hangers-items-search
    margin-top: .75em

  #import-link
    +awesome-button
    +loud-awesome-button-color
    margin-left: 2em

  #closet-hangers-items-search
    float: right

    input[type=search]
      &.loading
        background:
          image: url(/images/loading.gif)
          position: 2px center
          repeat: no-repeat
        padding-left: $icon-width + 4px

  #closet-hangers-contact
    clear: both
    font-size: 85%
    margin-bottom: 1em
    margin-left: 2em
    min-height: image-height("neomail.png")

    a
      background:
        image: image-url("neomail.png")
        position: left center
        repeat: no-repeat
      padding-left: image-width("neomail.png") + 2px

    input[type=text]
      width: 10em

    label
      font-weight: bold
      margin-right: .5em

      &:after
        content: ":"

  #closet-hangers
    clear: both
    text-align: center

    .object
      .quantity
        +opacity(.75)
        background: white
        padding: 2px 4px
        position: absolute
        left: ($object-width - $object-img-size) / 2 + $object-padding
        line-height: 1
        text-align: left
        top: $object-img-size - 20px

        span, input[type=number]
          font-size: 16px
          font-weight: bold

      form
        display: none

    &.current-user
      .object:hover
        form
          display: inline

        .closet-hanger-destroy
          position: absolute
          right: ($object-width - $object-img-size) / 2 + $object-padding
          top: 0

          input
            +context-button

        .quantity
          +opacity(1)
          background: transparent
          top: $object-img-size - 24px
          padding: 0

          span
            display: none

          input[type=number]
            padding: 2px
            width: 2em

          input[type=submit]
            font-size: 85%

      &.js
        .object:hover .quantity
          input[type=number]
            width: 2.5em

          input[type=submit]
            display: none

        .object.loading
          background: $module-bg-color
          outline: 1px solid $module-border-color

          .quantity span:after
            content: "…"