.inline-content {
  width: 80vw;
  max-width: 720px;

  &-toolbar {
    display: flex;
    gap: 25px;
    align-items: center;
  }

  &-filter,
  &-sort {
    display: flex;
    gap: 10px;
    width: 210px;
    margin-bottom: 25px;

    .label {
      color: var(--color-gray-888);
    }
  }

  &-cards {
    margin-bottom: 25px;

    &-card {
      width: 50vw;
      max-width: 570px;
      margin-bottom: 10px;

      &:not(:last-child) {
        border-bottom: 1px solid var(--color-gray-eee);
      }

      &-head {
        display: flex;
        gap: 10px;
        align-items: center;
        margin-bottom: 15px;
      }

      &-body {
        display: inline-block;
      }

      &-footer {
        margin-bottom: 10px;

        &-button {
          cursor: pointer;
          margin-right: 25px;
          color: var(--color-href);
        }

        &-closed_by {
          color: var(--color-gray-888);

          span {
            margin-right: 5px;
          }
        }

        &-comments {
          margin-top: 10px;
          padding: 10px;
          background-color: var(--color-gray-eee);
          border-radius: 2px;

          &-comment {
            &:not(:last-child) {
              margin-bottom: 25px;
            }

            &-header {
              display: flex;
              gap: 10px;
              align-items: center;
              margin-bottom: 5px;
            }

            &-body {
              margin-bottom: 10px;
              margin-left: 28px;
            }

            &-footer {
              margin-left: 28px;
              color: var(--color-gray-888);
            }
          }
        }
      }
    }
  }
}

:host ::ng-deep {
  .inline-highlight {
    margin-bottom: 25px;
    background-color: rgb(255 240 179 / 50%);
    border-bottom: 2px solid rgb(255 196 0 / 82%);
  }

  p {
    margin: 0;
  }
}