.list-column {
  background-color: var(--enas-list-col-background-color);
  font-size: var(--enas-font-size-h2);
  user-select: none;
  height: 100vh;

  --title-bar-height: 72px;

  @media screen and (min-width: 768px) {
    border-right: 1px solid var(--enas-border-color);
  }

  .title-bar {
    font-weight: normal;
    height: var(--title-bar-height);

    .title-bar-container {
      padding: var(--enas-col-padding);

      .section-title-bar-header {
        gap: 0.25rem;
        align-items: flex-start;

        .title {
          width: calc(90% - 45px);
        }

        .box {
          justify-content: space-between;
          width: 100%;
          padding-bottom: 0.5rem;

          .left {
            padding-top: 0.25rem;
            overflow-wrap: break-word;
            flex-direction: column;
            flex-grow: 1;
            min-width: 0px;
            display: flex;

            .left-box {
              align-items: center;
              flex-direction: row;
              flex-grow: 1;
              min-width: 0px;
              display: flex;


              .icon {
                font-size: 1.5rem;
                line-height: 2rem;
                text-align: center;
                fill: currentColor;
                width: 1.75rem;
                height: 1.75rem;
                margin-right: 0.3rem;
                margin-left: 0.15rem;
                width: 1.5rem;
                height: 1.5rem;
              }

              .title-box {
                overflow-wrap: break-word;
                flex-direction: column;
                flex-grow: 1;
                min-width: 0px;
                display: flex;
              }

              .title {
                font-weight: 600;
                font-size: 1.5rem;
                line-height: 2rem;
              }
            }
          }

          .right {
            display: flex;
          }
        }
      }
    }
  }

  .content-list {
    overflow-y: scroll;
    max-height: calc(100vh - var(--title-bar-height));

    .content-list-item {
      border: none;
      cursor: pointer;
      width: 100%;
      $item-height: 1.5rem;

      @media screen and (hover: hover) {
        &:hover {
          background-color: var(--enas-border-color);
        }
      }

      ul {
        list-style: disc;
      }

      .left {
        .item-icon {
          font-size: $item-height;
        }
      }

      .main {
        flex-grow: 1;
        min-width: 0px;
        line-height: $item-height;

        .title {
          line-height: $item-height;
          font-weight: 600;
          overflow: hidden;
          margin-right: 0.5rem;
        }

        .desc {
          opacity: 0.5;
          margin-top: 0.25rem;
          line-height: 1.4;
        }
      }

      .right {
        padding-left: 0px;
        padding: 1rem;
        align-items: flex-start;
        display: flex;
      }
    }
  }
}