.LinkList {
  --LinkList-imageSize: var(--gap-xl);

  display: block;

  > thead {
    display: none;
  }

  > tbody {
    display: block;
  }

  tr {
    border-top: var(--borderWidth-thin) solid var(--color-gray3);
    display: flex;
    flex-wrap: wrap;
    min-height: calc(var(--gap-m) * 2 + var(--LinkList-imageSize));
    padding: var(--gap-m) 0;
    padding-left: calc(var(--LinkList-imageSize) + var(--gap-m));
    position: relative;

    &:first-child {
      border-color: transparent;
    }
  }

  tr.no-icon {
    padding-left: 0;
  }

  tr.is-buttoned {
    width: calc(100% - (var(--gap-s) * 2 + var(--Icon-size)));
  }

  tr.contentIcon {
    min-height: 0;
    padding-left: calc(var(--iconSize-m) + var(--gap-m));
    padding-right: calc(var(--iconSize-m) + var(--gap-m));

    .LinkList-main {
      &[data-icon-name] {
        &::before {
          content: attr(data-icon-name);
        }
      }
    }

    .LinkList-main::before {
      .Icon;

      content: 'circle';
      font-size: var(--iconSize-m);
      left: 0;
      padding-right: var(--gap-m);
      position: absolute;
      top: var(--gap-m);
    }
  }
}

.LinkList.is-scrollable {
  max-height: 40vh;
  overflow: auto;

  @media (@mq-m) {
    max-height: 75vh;
  }
}

.LinkList-image {
  --Avatar-size: var(--LinkList-imageSize);

  align-items: center;
  display: flex !important;
  height: 100%;
  left: 0;
  order: -3;
  position: absolute;
  top: 0;
  width: var(--LinkList-imageSize);
}

.LinkList-image.is-icon {
  .Icon;
  .Icon.is-l;

  position: absolute;

  &[data-icon-name]::before {
    content: attr(data-icon-name);
  }
}

.LinkList-main {
  order: -2;
  width: 100%;
}

.LinkList-type {
  order: -1;
}

.LinkList
  td:not(.LinkList-image, .LinkList-main, .LinkList-viewers, .LinkList-button) {
  .Text.is-s;

  align-items: center;
  color: var(--color-gray5);
  display: flex;

  &:empty {
    display: none;
  }

  &.date,
  &.time {
    width: auto;
  }

  &.LinkList-description {
    color: var(--color-gray7);
    width: 100%;
  }

  .LinkList-icon {
    display: flex;

    &::before {
      background: var(--color-gray6);
      border-radius: 50%;
      content: '';
      display: inline-block;
      height: 2px;
      margin: 0 var(--gap-s);
      width: 2px;
    }
  }
}

.LinkList-viewers {
  bottom: var(--gap-m);
  position: absolute;
  right: 0;
}

.LinkList-button {
  position: absolute;
  right: calc((-1 * var(--Icon-size)) + (-2 * var(--gap-s)));
}
