.LiveBlogPostList {
  background-color: var(--color-white);
  box-shadow: var(--shadow-1);
  display: grid;
  grid-auto-rows: auto auto 1fr;
  position: relative;

  &-titleBar {
    display: flex;
    flex-grow: 1;
    order: -1;
    padding: 0 var(--gap-l) 0;
    width: 100%;
  }

  &-title {
    font-weight: bold;
    margin-left: calc(0px - var(--gap-l));
    order: -4;
    overflow: hidden;
    padding: var(--gap-m) var(--gap-m) var(--gap-m) var(--gap-l);
    text-overflow: ellipsis;
    white-space: nowrap;
    width: auto;

    &::before {
      display: none;
    }
  }

  &-controls {
    .Link.is-black;

    align-items: center;
    display: flex;
    flex: 1;
    order: -3;
    width: auto;

    li:not(:first-child) {
      margin-left: var(--gap-m);
    }
  }

  &-filters {
    --Input-focusBackground: var(--color-gray2);

    background: var(--color-gray1);
    border-color: var(--color-gray2);
    border-style: solid;
    border-width: 1px 0;
    margin-top: -1px;
    order: -1;
    position: relative;

    .Widget-title {
      margin-bottom: var(--gap-xs);
    }

    .searchInput input {
      margin-top: var(--gap-l);
    }

    .searchInput input,
    .ComboInput {
      margin-bottom: var(--gap-l);
    }

    .ComboInput::before,
    input[type] {
      border-color: var(--color-gray3);
    }
  }

  tr.is-new-content > td {
    animation: fade 10s forwards;
  }

  tr.is-new-content {
    animation: fade 10s forwards;
    border: solid 1px;
    box-shadow: var(--shadow-2);
  }

  .LinkList tbody {
    padding: 0 var(--gap-s) 0;
  }

  .LinkList tr {
    border: solid 1px;
    border-color: var(--color-gray2);
    box-shadow: var(--shadow-1);
    margin-bottom: var(--gap-s);
    margin-top: var(--gap-s);
    padding-right: calc(var(--LinkList-imageSize) + var(--gap-l));
  }

  .LinkList tr.is-pin {
    background: var(--color-gray1);
    box-shadow: none;
  }

  .LinkList tr.is-buttoned {
    width: auto;
  }

  .LinkList-button {
    right: calc(var(--gap-xl) / 2);
  }

  .LinkList-main {
    padding-left: var(--gap-m);
  }

  .LinkList-image {
    padding-left: var(--gap-m);
    width: calc(var(--gap-m) + 40px);
  }

  .date-time {
    padding-left: var(--gap-m);
  }

  @keyframes fade {
    from {
      border-color: var(--color-green5);
      color: var(--color-green5);
    }

    to {
      border-color: var(--color-gray2);
      color: var(--color-gray5);
    }
  }

  &-button {
    display: block;
    text-align: center;
  }
}

.LiveBlogPostList.is-collapsed {
  height: calc(var(--gap-m) * 2 + var(--lineHeight-m));
  overflow: hidden;
}

@media (@mq-m) {
  .LiveBlogPostList.is-collapsible {
    height: calc(
      100vh - var(--Page-headerHeight) - var(--Icon-size) - (2 * var(--gap-m))
    );
  }

  .LiveBlogPostList.is-collapsed {
    height: auto;
    overflow: auto;
  }
}
