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

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

  #item-contributors
    +subtle-banner
    clear: both
    margin:
      bottom: 0
      top: 2em
    
    header
      display: inline
      font-weight: bold
      margin-right: .25em
    
    footer
      display: inline
    
    ul
      display: inline
      list-style: none

      li
        display: inline
      
        &::after
          content: ", "
      
        &:last-child::after
          content: "."
    
  .nc-icon
    height: 16px
    width: 16px

  .outfit-viewer
    display: block
    position: relative
    width: 300px
    height: 300px
    border: 1px solid $module-border-color
    border-radius: 1em
    overflow: hidden
    margin: 0 auto .75em

    outfit-layer
      display: block
      position: absolute
      inset: 0

      img, iframe
        width: 100%
        height: 100%

    .loading-indicator
      position: absolute
      z-index: 999
      bottom: 0px
      right: 4px
      padding: 8px
      background: radial-gradient(circle closest-side, white 45%, #ffffff00)

      opacity: 0
      transition: opacity .5s

  .error-indicator
    font-size: 85%
    color: $error-color
    margin-top: .25em
    margin-bottom: .5em
    display: none

  // When loading, fade in the loading spinner after a brief delay. (We only
  // apply the delay here, because fading *out* on load should be instant.)
  // We are loading when the <turbo-frame> is busy, or when at least one layer
  // is loading.
  #item-preview[busy] .outfit-viewer, .outfit-viewer:has(outfit-layer:state(loading))
    cursor: wait
    .loading-indicator
      opacity: 1
      transition-delay: 2s

  #item-preview:has(outfit-layer:state(error))
    .outfit-viewer
      border: 2px solid red
    .error-indicator
      display: block

  .species-color-picker
    .error-icon
      cursor: help
      margin-right: .25em

    &[data-is-valid="false"]
      select
        border-color: $error-border-color
        color: $error-color