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

body.pets-bulk
  #needed-items-form, #bulk-pets-form
    text-align: center
  
  #needed-items-form
    #needed-items-pet
      border-top: 1px solid $soft-border-color
      display: none
      margin-top: 1em
      padding-top: 1em
      
      h4
        font-size: 150%
        margin-bottom: .5em
    
      #needed-items-reload
        +inline-block
        font-size: 12px
        margin-left: 1em
        vertical-align: middle
    
    #needed-items-alert
      display: none
      margin-top: .5em
    
    #needed-items-pet-thumbnail
      height: 50px
      width: 50px
    
    #needed-items-pet-items
      li.owned
        background: $module-bg-color
        border: 1px solid $module-border-color
    
    .object-owned
      color: $soft-text-color
      display: block
      font-size: 75%
      font-style: italic
      padding-bottom: .25em
    
    &.loading-pet, &.loading-items
      #needed-items-pet-name-field
        background:
          image: image-url("loading.gif")
          position: center right
          repeat: no-repeat
      
      #needed-items-pet-items
        +opacity(.50)
    
    &.loading-pet
      #needed-items-pet h4
        +opacity(.50)
    
    &.loaded
      #needed-items-pet
        display: block
    
    &.failed
      #needed-items-alert
        display: block
  
  #bulk-pets-form
    border-top: 1px solid $module-border-color
    margin-top: 12px
    padding-top: 12px
    
    textarea
      +inline-block

      // NOTE: This was previously `@extend input[type=text]`,
      // I copied it in from _layout.sass!
      border-radius: 3px
      background: #fff
      border: 1px solid $input-border-color
      color: $text-color + #444444
      padding: .25em
      &:focus, &:active
        color: inherit

      display: inline
      font: inherit
      height: 1.5em
      overflow: hidden
      resize: none
    ul
      list-style: none
      margin-top: 1em
      li
        +inline-block
        background: #eee
        margin: 0 auto
        min-width: 25%
        text-align: left
        .waiting-message, .loading-message, .response
          display: none
          font:
            size: 75%
            style: italic
          margin-left: 75px
        &.waiting .waiting-message, &.loading .loading-message, &.loaded .response, &.failed .response
          display: block
        &.loaded
          background: $notice-bg-color
        &.failed
          background: $error-bg-color
      img
        float: left
        height: 50px
        width: 50px
        margin-right: 1em
        vertical-align: middle

  &.js
    .noscript
      display: none
    .script-only
      display: block

  .script-only
    display: none