@import "partials/context_button"

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

  .flash
    clear: both

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

  #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: "…"