@import "../../../styles/modules/importAll";

.DashboardCanvasItem {
  position: relative;
  overflow: hidden;
  vertical-align: top;
  background-color: white;
  color: $dashboardFG;
  @include border-radius(8px);
  float: left;
  
  .unFiltered {
    background-image: url("../../../styles/img/exclamation_mark_icon.svg");
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-position: right 10px top 10px;
  }

  .title {
      display: none;
  }

  &.text {
    overflow-y: auto;
    color: $dashboardFG;

    ol,
    ul {
      margin-left: 20px;
    }

    a {
      color: $lumenGreen;
    }

    strong {
      font-weight: 700;
    }
    
    em {
      font-style: italic;
    }

    ul {
      li {
        &.ql-indent-1 {
          margin-left: 20px;
        }    
        &.ql-indent-2 {
          margin-left: 40px;
        }    
        &.ql-indent-3 {
          margin-left: 60px;
        }    
        &.ql-indent-4 {
          margin-left: 80px;
        }    
        &.ql-indent-5 {
          margin-left: 100px;
        }    
        &.ql-indent-6 {
          margin-left: 120px;
        }    
        &.ql-indent-7 {
          margin-left: 140px;
        }    
        &.ql-indent-8 {
          margin-left: 160px;
        }    
        &.ql-indent-9 {
          margin-left: 180px;
        }    
        &.ql-indent-10 {
          margin-left: 200px;
        }    
      }
    }
  }

  .itemContainer {
    &.text {
      line-height: 1.4rem;
      white-space: pre-wrap;
      word-break: break-word;
      color: $dashboardFG;
    }
  }

  .itemTitle {
      padding-bottom: 15px;

      h2 {
          color: $dashboardFG;
          font-weight: 600;
          font-size: 1.3em;
      }
      span {
          color: $dashboardFGSecondary;
          font-size: 0.9em;
      }
  }
}
