@use '../bootstrap/variables' as var;

.page-list :global {
  .btn-page-item-control {
    width: 20px;
    height: 20px;
    padding: 0px;
  }

  .page-list-ul {
    padding-left: 0;
    margin: 0;

    > li {
      list-style: none;

      > a {
        padding: 0px;
        color: inherit;

        &:hover {
          color: inherit;
        }
      }
    }

    .picture {
      width: 16px;
      height: 16px;
      vertical-align: text-bottom;

      &.picture-md {
        width: 20px;
        height: 20px;
      }
    }

    .page-list-meta {
      font-size: 0.9em;

      > span {
        margin-right: 0.3rem;
      }

      i {
        margin-right: 2px;
      }

      .footstamp-icon {
        svg {
          width: 14px;
          height: 14px;
        }
      }
      .seen-users-count {
        &.strength-0,
        &.strength-1,
        &.strength-2 {
          font-weight: bold;
        }
        &.strength-3 {
          font-weight: normal;
        }
        &.strength-4 {
          opacity: 0.5;
        }
      }
    }

    // after second level indent
    .page-list-ul {
      padding-left: 2rem;
    }

    // override .page-list-ul
    &.page-list-ul-flat {
      padding-left: 0;
    }
  }

  // List group
  .list-group {
    .list-group-item {
      min-height: 136px;

      .page-list-updated-at {
        font-size: 12px;
      }

      &.list-group-item-action {
        border-left: solid 3px transparent;
      }
    }
  }
}
