.task {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: .5rem;
    flex-direction: column;
    background-color: #444;

    .header {
        border-radius: .1rem;
        height: 2.5rem;
        width: 100%;
        display: flex;
        align-items: center;

        .drag-n-drop {
            padding: 0 1rem;
            &:hover {
                cursor: grab;
            }
        }

        mat-checkbox {
            // padding: 0 .5rem;
        }

        .input-container {
            display: flex;
            flex-grow: 1;

            input {
                border-style: none;
                height: 1.8rem;
                padding: 0 .8rem;
                margin: 0 .8rem;
                background-color: #444;
                border-style: solid;
                border-width: .1rem;
                border-color: rgba(0,0,0, 0);
                border-radius: .2rem;

                width: 100%;

                transition: background-color .2s ease-out,
                        border-color .2s ease-out;

                &:hover {
                    border-color: rgb(53, 53, 53);
                }
            }
        }

        .expand {
            margin-right: .5rem;
        }
    }

    .body {
        height: 0;
        visibility: hidden;
        transition: height .1s ease-in-out;
        display: flex;

        &.expanded {
            height: 20rem;
            visibility: visible;
            width: 100%;
        }

        .container {
            flex-grow: 1;
            padding: 1rem;
            display: flex;
            flex-direction: row;

            .description-container {
                width: 80%;
                height: 100%;
                display: flex;
                flex-direction: column;
    
                textarea {
                    flex-grow: 1;
                    border: 1px solid #444;
                    background-color: #4a4a4a;
                    resize: none;
                }
            }
    
            .actions {
                display: flex;
                flex-grow: 1;
                background-color: gray;
                height: 100%;
                flex-wrap: wrap;
                max-width: 20%;
                justify-content: space-around;
                align-items: flex-start;
                padding: 1rem;
            }
        }
    }
}