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

.DashboardCanvasItem {
    position: relative;
    padding: 20px;
    margin: 10px;
    background-color: white;
    color: $dashboardFG;
    @include border-radius(8px);

    .title {
        display: none;
    }

    .itemContainer {
        &.text {
            position: relative;
        }
    }

    .deleteButton {
        position: absolute;
        top: 5px;
        right: 7px;
        display: block;
        z-index: 2;
        color: #C6CAD4;

        &:hover {
            color: inherit;
        }
    }

    .DashboardCanvasItemEditable {
        height: 100%;

        textarea {
            font-size: inherit;
            line-height: inherit;
            color: $dashboardFG;
        }
    }

    .itemTitle {
        padding-bottom: 15px;

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

        }
        .notAffected{
            span{
                color: #f6a431;
                font-size: 1em;
                font-weight: bolder;
                padding-left: 10px;
            }
        }        
    }

    .unFiltered {

      background-image: url("../../styles/img/exclamation_mark_icon.svg");
      background-repeat: no-repeat;
      background-size: 24px 24px;
      background-position: right 10px top 10px;
    }

    &--focused {
        z-index: 10;
    }
}