.list {
  flex: 1;
  grid-gap: 3px;
  margin-top: 30px;
  padding: .5px 0;
  position: relative;

  &:focus-within {
    button.icon-add { display: flex; }
  }

  @mixin toolbar-button {
    align-items: center;
    border-radius: 5px;
    border: 1px solid transparent;
    box-shadow: none;
    cursor: pointer;
    display: inline-flex;
    height: 20px;
    justify-content: center;
    min-height: 20px;
    min-width: 25px;
    padding: .1rem;
    min-width: 25px;

    &:hover {
      border: 1px outset #ccc;
    }
    &.on {
      border: 1px inset #ccc;
      background-color: #eee;
    }
  }

  > .title-bar {
    align-items: center;
    border-bottom: 1px solid;
    display: flex;
    font-size: .7rem;
    height: 30px;
    justify-content: space-between;
    left: 0;
    position: absolute;
    right: 0;
    top: -30px;
    width: 100%;

    > .multi-toggle.sorter {
      > .toggle {
        @include toolbar-button();
        border-radius: 0;

        &:first-of-type { border-radius: 5px 0 0 5px; }
        &:last-of-type { border-radius: 0 5px 5px 0; }
        &:only-child { border-radius: 5px; }
      }
    }

    > .categorize {
      @include toolbar-button();
      margin-left: 5px;
    }

    > .filter {
      @include toolbar-button();
      background: inherit;
      box-shadow: none;
      margin-left: 5px;
    }

    .text {
      flex: 1;
      font-size: 1.5em;
      font-weight: bold;
      text-align: center;
    }

    > button {
      background: none;
      border: none;
      cursor: pointer;
      height: 30px;
      width: 30px;
    }
  }

  .category {
    display: flex;
    flex-direction: column;

    > .details {
      border-bottom: 1px solid;
      display: flex;
      flex-direction: row;
      font-weight: bold;
      height: 30px;
      justify-content: space-between;
      padding: .25em;

      > .title { flex: 1; }
      > .range {
        align-items: center;
        display: flex;
        justify-content: center;
        width: 50px;
      }
    }
  }

  .list-item-wrapper {
    box-sizing: border-box;
    display: flex;
    flex: 1;
    margin: 0 0 .25em 0;
    padding: .25em;
    position: relative;
    -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid;

    > .drag-handle, > button.icon-remove {
      align-items: center;
      background: none;
      border: none;
      box-sizing: border-box;
      cursor: pointer;
      display: none;
      height: 30px;
      justify-content: center;
    }

    > .drag-handle {
      color: #cccccc;
      font-size: 6px;
      letter-spacing: 2px;
      line-height: 5px;
      margin-right: 5px;
      overflow: hidden;
      padding: 0 2px;
      text-align: center;
      text-shadow: 1px 0 1px black;
      vertical-align: middle;
      width: 15px;

      &:after {
        content: '•• •• •• •• ';
      }
    }

    > button.icon-remove {
      width: 30px;

      &:hover {
        background-color: #ccf8f8;
      }
    }

    &.expanded .drag-handle {
      position: absolute;
      left: -15px;
    }

    &.sortable-chosen {
      background-color: antiquewhite;
    }

    &.expanded {
      column-span: all;

      > .expandable-wrapper.expanded, > button.icon-remove {
        background: #fff;
        border: 1px solid #666;
        box-shadow: 3px 3px #666;
        margin-bottom: 3px;
        margin-left: -1px;

        + button.icon-remove {
          border-left: none;
        }
      }
    }

    .list { // list inside a list
      > .title-bar {
        padding: 0;

        > .button.icon-add { right: 0; }
      }

      > .list-item-wrapper > .icon-remove {
        background: #fff;
        border: 1px solid #666;
        border-left: none;
        box-shadow: 3px 3px #666;
        display: flex;
        position: absolute;
        right: -30px;
        z-index: 1;

        &:hover { background: #ccf8f8; }
      }

      > .expandable > .list-item-wrapper > div {
        padding: 0;
      }
    }

    &:focus-within, &:hover {
      background: #eee;
      border-radius: 0;

      > .drag-handle { display: flex; }
      > * > .editable {
        background-color: #f3f3f3;
        border: 1px solid #ddd;
      }
    }
  }

  &.dragging > .list-item-wrapper {
    > .drag-handle, button.icon-remove { display: none!important; }
  }
}

.sheet.small .list {
  columns: 1!important;
  width: 100%;

  .list-item-wrapper {
    width: 100%;
  }
}