// Copyright (C) 2019-2021 Estonian Information System Authority.
// See the file 'LICENSE' for copying permission.
.list

  // unset default list styles
  &.is-reset
    list-style: none
    padding: 0

  // Remove all the default list styles and apply a more tree-like styling. This
  // variation is common use for file trees (for example).
  &.is-tree
    padding-left: 0

    &, ul
      list-style: none

    ul
      padding-left: $gap

    li
      & > input[type="checkbox"].list-collapse
        display: none

        &:not(:checked) + label + ul
          @extend .hidden

      & > label
        display: block
        border-bottom: 1px solid $border
        padding: $gap
        margin: 0
        &:hover
          background-color: $light
        &:active
          background-color: $light
        +dark-mode
          border-color: $border-dark

      &.is-parent
        & > input[type="checkbox"].list-collapse
          display: none
        & > label > .columns
          display: inline-flex
        & > label:before
          content: ""
          display: inline-block
          height: 0
          width: $gap
          border-style: solid
          border-width: 6px 0 6px 10.4px
          border-color: transparent transparent transparent $border
          +dark-mode
            border-color: transparent transparent transparent $border-dark
        & > input[type="checkbox"].list-collapse:checked + label:before
          border-width: 10.4px 6px 0 6px
          border-color: $border transparent transparent transparent
          +dark-mode
            border-color: $border-dark transparent transparent transparent

  // horizontal list modifier
  &.is-horizontal
    list-style: none
    padding-left: 0
    & > li
      display: inline-block
      line-height: 1.4em
      &:not(:first-child)
        margin-left: -4px
      &:not(:last-child):after
        content: "\2022"
        display: inline-block
        margin: 0 $gap/2

  // list variant for a hierarchical list/index component
  &.is-index

    &,
    & ul
      list-style: none
      padding: 0
      margin: 0

    ul,
    li,
    .label
      margin-bottom: $gap
      width: 100%

    ul
      margin-left: $gap

    .label
      opacity: .5
      font-size: 1em

    a
      display: block
      text-decoration: none
      color: inherit

      & + ul
        margin-top: $gap

      &.is-active
        font-weight: 700
        color: $dark

        +dark-mode
          color: tint($dark, .6)

  // list variant for displaying information like a tree diagram
  // - experiment for a process tree figure
  // - https://codepen.io/ross-angus/pen/jwxMjL
  &.is-tree-diagram

    margin: 0 0 1em
    text-align: center

    &, ul, li
      list-style: none
      margin: 0
      padding: 0
      position: relative

    &, ul
      display: table

    ul
      width: 100%

    li
      display: table-cell
      padding: .5em 0
      vertical-align: top
      &:before
        content: ""
        position: absolute
        left: 0
        right: 0
        top: 0
        outline: .1em solid $border
      &:first-child:before
        left: 50%
      &:last-child:before
        right: 50%

    code,
    span
      border: solid .1em $border
      border-radius: .2em
      display: inline-block
      margin: 0 .2em .5em
      padding: .2em .5em
      position: relative

      &.leading-node
        padding: .2em 1em
        border: 0
        background: linear-gradient(rgba($border, 0), rgba($border, .5))
        &:before
          outline: none

    ul:before,
    code:before,
    span:before
      content: ""
      position: absolute
      height: .5em
      left: 50%
      outline: .1em solid $border

    ul:before
      top: -.5em
    code:before,
    span:before
      top: -.55em

    & > li
      margin-top: 0
    & > li:before,
    & > li:after,
    & > li > code:before,
    & > li > span:before
      outline: none

  // list format optimized for displaying strings
  // - counts using css counter by default
  // - when <li> has a data-count attribute, that will be used for listing instead.
  &.is-strings-list
    @extend .list, .is-reset
    margin-left: 0
    margin-right: 0
    counter-reset: str-list-counter
    li
      counter-increment: str-list-counter
      &:not([class^="has-padding"])
        padding: $gap/2 0
      &:not([role="log"]).is-odd
        background: rgba(0,0,0,.05)
      &:not([role="log"]):before
        opacity: .5
        content: counter(str-list-counter)
        display: inline-block
        text-align: right
        width: $gap * 2
        margin-right: $gap
      &[data-count]:before
        content: attr(data-count)

    // use these for log messages on when all elements are hidden through JS
    li[role="log"]
      display: none
    &.has-no-results li[role="log"]
      display: list-item
