@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
    position: relative
    display: block
    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
        width: 100%
        height: 100%

    &:has(.outfit-layer[data-status="loading"])
      background: gray

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

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