@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 {
     &.expanded {
       .top-row-header {
         max-height: 40px;
         opacity: 1;
         transform: translateY(0);
         pointer-events: auto;
         display: flex;
       }
       .input-fields {
         &.creator-remarks {
           .co-input-text {
             max-height: 40px;
             opacity: 1;
             transform: translateY(0);
             pointer-events: auto;
             display: block;
           }
         }
       }
     }
   }
   .top-row-header {
     overflow: hidden;
     max-height: 0;
     opacity: 0;
     transform: translateY(-6px);
     pointer-events: none;
     display: flex;
     border-bottom: 1px solid #ececec;
     transition:
       max-height 220ms ease,
       opacity 160ms ease,
       transform 220ms ease;
     .co-email-selector {
       flex-direction: row;
       .recipients-add {
         display: none;
       }
     }
     .recipients-line {
       max-width: 600px;
       .co-input-text {
         .input-wrapper {
           label {
             color: #000;
           }
         }
       }
     }
   }
   .co-list-of-icons {
     position: absolute;
     top: 4px;
     left: 3px;
     display: block;
     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;
       background: #212437;
       width: 35px;
       height: 30px;
       border-radius: 5px;
       .co-icon {
         svg {
           fill: #FFF;
         }
       }
     }
     .dropdown-menu {
       padding: 5px;
       display: flex;
       flex-direction: column;
       gap: 5px;
       .icon-item {
         cursor: pointer;
       }
     }
   }
   .top-rows {
     display: flex;
     flex-direction: column;
     width: 100%;
     gap: 0;
     &:not(.expanded) {
       .input-fields {
         &.creator-remarks {
           .co-input-textarea {
             &.large-remark {
               min-height: 0;
               overflow: hidden;
               opacity: 0;
               textarea {
                 min-height: 0;
                 padding-top: 0;
               }
             }
           }
         }
       }

     }
     .input-fields {
       display: flex;
       flex-direction: row;
       width: 100%;
       align-items: center;
       gap: 15px;

       .task-input-fields {
         display: flex;
         flex-direction: column;
         width: 100%;
       }
       &.creator-remarks {
         .co-input-text {
           width: 100%;
           margin-left: 0;
           overflow: hidden;
           max-height: 0;
           opacity: 0;
           transform: translateY(-6px);
           pointer-events: none;
           display: flex;
           border-bottom: 1px solid #ececec;
           transition:
             max-height 220ms ease,
             opacity 160ms ease,
             transform 220ms ease;
           &:before {
             box-shadow: none;
           }
         }
         .co-input-textarea {
           &.large-remark {
             min-height: 90px;
             width: 100%;
           }
           &:before {
             box-shadow: none;
           }
           label {
             top: 10px;
             transform: none;
           }
           textarea {
             margin-top: 0;
             padding-top: 10px;
             min-height: 90px;
           }
         }
       }
     }
   }
   .extras-buttons {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
     padding: 10px;
     gap: 10px;
     .co-button {
       background-color: transparent;
       cursor: pointer;
       width: 26px;
       height: 26px;
       .co-icon {
         svg [fill] {
           fill: #000;
         }
       }
     }
     .task-buttons {
       display: flex;
       flex-direction: row-reverse;
       gap: 10px;
       .co-button {
         svg {
           polygon {
             fill: #000;
           }
         }
         svg [fill] {
           fill: #000;
         }
       }
     }
   }
   .paper-plane {
     padding: 5px 10px;
     .co-button {
       background-color: transparent;
       cursor: pointer;
       width: 24px;
       height: 24px;
       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;
         }
       }
     }
   }
 }
}