@import ../shared/jquery.jgrowl

$object-padding: 6px
$nc-icon-size: 16px

$preview-dimension: 400px
$sidebar-margin: 20px
$sidebar-width: 400px
$sidebar-unit-horizontal-padding: 24px
$sidebar-unit-inner-width: $sidebar-width - $sidebar-unit-horizontal-padding * 2

body.outfits-edit
  #preview-toolbar
    margin-bottom: .5em
    text-align: left
    form
      display: inline
      margin-right: 2em
  #pet-info form
    display: inline
  #pet-state-form
    ul
      list-style: none
      &, li
        display: inline
    input
      display: none
    label
      +awesome-button
      margin: 0 .25em
    li.selected label
      +awesome-button-color($marked_button_color)
  #sharing
    float: right
    position: relative
  #short-url-response
    font-size: 87.5%
    display: none
    position: absolute
    right: 0
    top: -2em
    width: 20em
  #share-button-wrapper
    display: inline
  #share-button
    img
      margin:
        bottom: -0.25em
        right: .25em
      height: 16px
      width: 16px
    &:active
      top: 1px
  #preview
    clear: both
  #preview-swf
    float: left
    height: $preview-dimension
    margin-bottom: 1em
    position: relative
    width: $preview-dimension
  #preview-swf-overlay
    +opacity(0)
    background: black
    height: 100%
    left: 0
    position: absolute
    top: 0
    width: 100%
  #preview-sidebar
    float: left
    height: $preview-dimension
    margin-left: $sidebar-margin
    margin-bottom: 1em
    width: $container_width - $preview-dimension - $sidebar-margin
    &.viewing-outfits
      #preview-closet
        display: none
      #preview-outfits
        display: block
  #preview-closet
    h2
      margin: 0
    .object
      background: $module-bg-color
      img
        +opacity(0.5)
      &.worn
        background: transparent
        img
          +opacity(1)
      &.no-assets
        background: $error-bg-color
        color: $error-color
        padding-bottom: 1.25em
        .no-assets-message
          display: block
  .no-assets-message
    background: $error-bg-color - #080808
    bottom: 0
    color: $error-color - #080808
    cursor: pointer
    display: none
    font-size: 75%
    left: 0
    position: absolute
    width: 100%
  #no-assets-full-message
    +border-radius(5px)
    background: $error-bg-color + #111111
    border: 1px solid $error-border-color + #111111
    color: $error-color + #111111
    font-size: 75%
    left: -9999px
    padding: .25em
    position: absolute
    top: -9999px
    width: 30em
  #preview-search-form
    clear: both
    text-align: left
    h2
      +inline-block
      margin: 0 1em 0 0
    input
      +inline-block
  #preview-search-form-pagination
    +inline-block
    margin-left: 2em
    a, span
      margin: 0 .25em
    .current
      font-weight: bold
  #preview-search-form-clear
    display: none
    font-size: 87.5%
    margin-left: 2em
  #preview-search-form-loading
    display: none
    font:
      size: 75%
      style: italic
    margin-left: 2em
  #preview-search-form-no-results
    display: none
  #preview-search-form-help
    font-size: 87.5%
    margin-left: 2em
  .search-helper
    font-family: inherit
  .possible-error
    @extend .error
    display: none
  #fullscreen-copyright
    display: none
  &.fullscreen
    $fullscreen-search-border: 1px 1px 0
    height: 100%
    #container
      +box-sizing(border-box)
      height: 100%
      margin: 0 auto
      min-width: 800px
      padding-top: 2.5em
      position: relative
      width: 80%
    h1
      display: none
    #short-url-response
      position: static
    #preview
      width: 100%
    #preview-sidebar
      +border-radius(10px)
      border: 1px solid $soft-border-color
      float: right
      height: 100%
      margin: 0
      overflow: auto
      position: relative
      width: $sidebar-width
      > div
        padding:
          left: $sidebar-unit-horizontal-padding
          right: $sidebar-unit-horizontal-padding
    #preview-search-form
      bottom: 1em
      left: 0
      overflow: auto
      padding: .5em 1em
      position: absolute
      width: 100%
    #preview-search-form-help
      div
        +inline-block
        width: 48%
    #footer
      bottom: 0
      left: 0
      position: absolute
      width: 100%
      ul, p, li
        display: inline
      ul
        margin-right: 2em

  .object
    padding: $object-padding
    position: relative
    ul
      display: none
      left: 0
      list-style: none
      position: absolute
      top: 0
      li
        margin-bottom: .25em
        a
          +awesome-button
          +awesome-button-color(#aaaaaa)
          +opacity(0.9)
          font-size: 80%
    &:hover
      ul, .object-info
        display: block

  // the difference between the horizontal edge of the object element and the
  // image edge
  $object-img-diff: ($object-width - $object-img-size) / 2 + $object-padding

  .nc-icon
    background: url(/assets/images/nc.png) no-repeat
    height: $nc-icon-size
    position: absolute
    right: $object-img-diff
    text-indent: -9999px
    top: $object-img-size - $nc-icon-size
    width: $nc-icon-size
    &:hover
      +opacity(0.5)

  .object-info
    +border-radius(12px)
    +opacity(0.75)
    background: #aaa
    color: #fff
    display: none
    height: 16px
    position: absolute
    right: $object-img-diff / 2
    top: 0
    width: 16px
    span
      font:
        family: $text-font
        weight: bold
      position: relative
      top: -2px
    &:hover
      +opacity(1)

  $outfit-thumbnail-size: 50px
  $outfit-thumbnail-original-size: 100px
  $outfit-thumbnail-margin: 12px
  $outfit-header-padding: 24px
  $outfit-content-width: $sidebar-unit-inner-width - $outfit-thumbnail-size - $outfit-thumbnail-margin - 32px
  $outfit-content-inner-width: $outfit-content-width - $outfit-header-padding

  #preview-outfits
    display: none
    text-align: left
    h2
      margin-bottom: .25em
    h3
      margin-bottom: .5em
    > ul
      display: block
      font-family: $main-font
      list-style: none
      margin-bottom: 1em
      > li
        +clearfix
        font-size: 75%
        margin-bottom: .5em
        .outfit-thumbnail
          float: left
          height: $outfit-thumbnail-size
          margin-right: $outfit-thumbnail-margin
          overflow: hidden
          position: relative
          width: $outfit-thumbnail-size
        img
          height: $outfit-thumbnail-original-size
          left: -$outfit-thumbnail-original-size / 4
          position: absolute
          top: -$outfit-thumbnail-original-size / 4
          width: $outfit-thumbnail-original-size
        > div
          float: left
          width: $outfit-content-width
        button
          +reset-awesome-button
          +opacity(.5)
          font-size: 150%
          float: right
          line-height: 1
          margin-top: -.125em
          padding: .125em .25em
          &:hover
            +opacity(1)
            background: $module-bg-color
        header
          display: block
          padding-left: $outfit-header-padding
        .outfit-star
          background:
            image: url(/images/unstarred.png)
            position: left top
            repeat: no-repeat
          bottom: -2px
          /* margin-bottom doesn't work here
          cursor: pointer
          display: block
          float: left
          height: 16px
          margin-left: -24px
          /* makes it not take up inline space
          position: relative
          width: 16px
        h4
          cursor: pointer
          font-size: 150%
          &:hover
            text-decoration: underline
        input
          +opacity(.5)
          border-color: $background-color
          width: $outfit-content-inner-width
          &:hover
            +opacity(1)
            border-color: $input-border-color
        .outfit-delete-confirmation
          display: none
          span
            color: red
          a
            margin: 0 .25em
        &.confirming-deletion
          .outfit-delete
            visibility: hidden
          .outfit-url
            display: none
          .outfit-delete-confirmation
            display: block
        &.starred
          .outfit-star
            background-image: url(/images/star.png)

  .preview-sidebar-nav
    float: right
    font-size: 85%
    margin-top: 1em