@include export-module('co-task-creator-layout') {
 .co-task-creator{
   width: 100%;
   position: relative;
   &:not(.co-shared-hidden) {
     display: block;
   }
   .task-creator-wrapper {
     margin-left: 0;
     box-shadow: 0 1px 4px 0 #8083a385;
     border-radius: 5px;
   }
   .top-rows {
     display: flex;
     flex-direction: column;
     width: 100%;
     gap: 0;
     .input-fields {
       display: flex;
       flex-direction: row;
       width: 100%;
       align-items: flex-start;
       gap: 15px;

       .task-input-fields {
         display: flex;
         flex-direction: column;
         width: 100%;
       }
       .co-list-of-icons {
         position: absolute;
         display: block;
         left: 0;
         top: 0;
         height: fit-content;
         box-shadow: 0 2px 2px 0 #0000001A;
         border-radius: 3px;
         background: #ffffff;
         z-index: 2;
         .icon-item {
           display: flex;
           align-items: center;
           position: relative;
           .drop-arrow {
             display: none;
           }
           .label {
             display: none;
           }
           .co-icon {
             padding: 2px;
           }
         }
         & > .icon-item {
           cursor: pointer;
           padding: 5px;
           &:after {
             content: '';
             width: 0;
             height: 0;
             border-left: 4px solid transparent;
             border-top: 4px solid transparent;
             border-right: 4px solid #000;
             border-bottom: 4px solid #000;
             position: absolute;
             right: -1px;
             bottom: -1px;
             transform: rotate(0deg);
           }
         }

         .dropdown-menu {
           padding: 5px;
           display: flex;
           flex-direction: column;
           gap: 5px;

           .icon-item {
             cursor: pointer;
           }
         }
       }
       &.creator-remarks {
         .co-input-text {
           width: 100%;
           margin-left: 0;
           border-bottom: 4px solid #f5f5fc;
           &:before {
             box-shadow: none;
           }
         }
         .co-input-textarea {
           &.large-remark {
             min-height: 60px;
             width: 100%;
             border-bottom: 4px solid #f5f5fc;
           }
           &:before {
             box-shadow: none;
           }
           label {
             top: 10px;
             transform: none;
           }
           textarea {
             margin-top: 0;
             padding-top: 30px;
             min-height: 60px;
           }
         }
       }
     }
   }
   .extras-buttons {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
     padding: 10px;
     gap: 5px;
     .co-button {
       background-color: transparent;
       cursor: pointer;
       width: 30px;
       height: 30px;
     }
     .task-buttons {
       display: flex;
       flex-direction: row-reverse;
       gap: 10px;
       .co-button {
         svg {
           polygon {
             fill: #000;
           }
         }
       }
     }
   }

   .co-files-upload {
     width: 100%;
     min-height: auto;
     overflow-x: auto;
     .co-drag-drop-container {
       padding-top: 40px;
       position: relative;
       margin-top: 0;
       gap: 5px;
       align-items: flex-start;
       .add-file {
         top: 0;
         right: 0;
         z-index: 2;
         .co-tile-render {
           display: flex;
           align-items: center;
           flex-direction: row-reverse;
           .add-button {
             position: unset;
           }
           .info {
             display: none;
           }
         }
         .description {
           font-weight: bold;
           font-size: 12px;
         }
         svg {
           path {
             fill: #1A73E8;
           }
           path + path {
             display: none;
           }
         }
         .co-icon {
           width: 40px;
           height: 40px;
         }
       }
       .add-dropzone {
         position: relative;
         top: -30px;
         z-index: 1;
       }
       .tile {
         padding: 10px;
         border-radius: 5px;
         border: 1px solid #CCCCCC;
         height: 100%;
         .info {
           max-width: 100px;
           .description {
             font-size: 10px;
             display: -webkit-box;
             -webkit-line-clamp: 2;
             -webkit-box-orient: vertical;
             overflow: hidden;
             text-overflow: ellipsis;
           }
         }
         .trash {
           width: 20px;
           height: 20px;
           padding: 2px;
         }
       }
     }
   }
 }
}
