components.styl

@import './lib';

.components
  background-color var(--color-base-200)
  color var(--color-base-content)
  height 100%
  overflow auto
  position fixed
  width 331px

.collapsible-header
  align-items center
  display flex
  justify-content space-between

  .entityPrint
    color var(--color-base-content)

.collapsible-content
  padding 5px 0

.componentTitle span
  color var(--color-base-content)
  font-weight 600
  max-width 200px
  overflow hidden
  text-overflow ellipsis
  text-transform uppercase
  vertical-align bottom !important
  white-space nowrap

.componentHeaderActions
  align-items center
  display flex
  gap 10px

.collapsible .static
  background var(--color-base-100)
  border-bottom 2px solid var(--color-base-200)
  box-sizing content-box
  cursor pointer
  font-size 13px
  height 16px
  margin 0
  padding 8px 10px 12px
  vertical-align bottom

  &:hover
    background var(--color-base-lighter)

.collapsible .static .collapse-button
  border 6px solid transparent
  float left
  height 0
  margin-left 2px
  margin-right 10px
  width 0

.collapsible.collapsed .static .collapse-button
  border-left-color var(--color-base-content)
  margin-top 4px

.collapsible:not(.collapsed) .static .collapse-button
  border-top-color var(--color-base-content)
  margin-top 7px

.propertyRow
  align-items center
  display flex
  font-size 13px
  min-height 30px
  padding 2px 30px 2px 15px
  position relative

  &:has(.vec3)
    padding-right 15px

  .text
    cursor default
    display inline-block
    flex-shrink 0
    overflow hidden
    padding-right 10px
    text-overflow ellipsis
    vertical-align middle
    width 118px

  input.number
    width 40px

  .vec2 input.number,
  .vec3 input.number
    width 40px

  .vec4 input.number
    width 34px

  .vec2, .vec3, .vec4
    display inline

  .map_value
    margin 0 0 0 5px
    width 68px

  input[type="text"],
  input[type="number"],
  input.string,
  input.number
    background var(--color-base-300)
    color var(--color-primary)
    min-height 26px
    padding 1px 5px

    &:last-child
      padding-right 0

  input.string
    box-sizing border-box
    padding-left 8px
    width 150px

  input[type="text"]:focus,
  input.string:focus
    box-shadow none

  .color-widget *
    vertical-align middle

  .color_value
    letter-spacing 1px
    margin 0 0 0 5px
    width 68px

.propertyRowDefined .text
  color var(--color-property-defined)
  font-weight 600

.propertyRowExplicitlySetToDefault .text
  font-style italic
  font-weight 600

.propertyRow .reset-button
  background none
  border none
  color var(--color-base-content)
  cursor pointer
  opacity 0.6
  padding 2px
  position absolute
  right 8px
  top 50%
  transform translateY(-50%)

  &:hover
    opacity 1

#addComponentContainer
  align-items center
  background var(--color-base-200)
  border-top 1px solid var(--color-base-100)
  display flex
  flex-direction column
  justify-content center
  padding 20px 10px

  #addComponent
    text-align left
    width 200px

    .select__control
      background var(--color-base-300)
      color var(--color-primary)
      height 35px

  #addComponentHeader
    font-size 15px
    margin 0 0 10px

  input[type="text"]:focus
    box-shadow none

.component-title
  align-items center
  display flex

#componentEntityHeader
  .collapsible-header
    bottom 5px
    position relative

  a.button
    margin-left 10px

  .collapse-button
    display none

  .static
    height 13px

  .entityPrint
    font-size 15px
    padding-left 5px

  .entityName
    max-width 160px

#mixinSelect
  width 160px

.propertyRow .texture
  display flex

  input
    margin-left 0
    width 120px