public/components/content-list-drawer/_content-list-drawer.scss

.drawer {
    display: flex;
    width: 100%;
    * {
        box-sizing: border-box;
    }
    // viewport minus the sidebar

    &__warning {
        color: $c-red;
    }

    .content-list-drawer--hidden & {
        display: none;
    }

    .content-list-drawer.content-list-drawer--trashed .content-list-drawer__full-width {
        position: relative;
        overflow: hidden;

        &:before {
            display: block;
            content: "TRASHED";
            font-size: 16vw;
            position: absolute;
            z-index: 999;
            top: 0;
            height: 16vw;
            left: 0;
            width: calc(100% - 120px);
            line-height: 100%;
            font-weight: bold;
            text-align: center;
            color: transparentize($c-red, 0.8);

        }

        .content-list-drawer__column{
            pointer-events: none;
        }

        .drawer__control-item--restore {
            background-color: transparentize($c-green, 0.1);
            color: #fff;
            &:hover {
                background-color: $c-green;
            }
        }
    }

    &__user-image {
        border-radius: 50%;
    }

    &__section {
        background-color: $c-grey-150;
        padding: 12px;
        flex: 1 1 0;
        min-height: 250px;

        &:not(:last-child) {
            margin-right: 3px;
        }

        &--closed {
            flex: initial;
            padding: 0;
        }
    }

    &__section-data-row {
        &--editable {
            cursor: pointer;
        }
    }


    &__header {
        font-weight: bold;
        padding-bottom:10px;
        border-bottom: 4px solid $c-grey-300;

        &-toggle {
            height: 100%;
            padding: 0 20px;
            position: relative;
            background-color: $c-grey-150;
            -webkit-appearance: none;
            border: 0;

            &:hover {
                cursor: pointer;
                background-color: $c-grey-300;
            }
        }

        &--closed {
            position: absolute;
            border: 0;
            transform: rotate(90deg) translate(0, -50%);
            transform-origin: 0 0;
            top: 12px;
            padding: 0 0 0 20px;
            margin: 0;

                .drawer__icon {
                    position: absolute;
                    left: 0;
                    bottom: 0;
                }
        }
    }

    &__inner {
        display: flex;
        width: 100%;
        font-size: 13px;
        font-size: 1.3rem;
        line-height: 16px;
        line-height: 1.6rem;

        &--closed {
            display: none;
        }
    }

    &__column {
        list-style: none;
        margin: 0;
        padding: 12px 0 0 12px;
        flex: 1 1 0;
        overflow: hidden;
        &--with-overflow {
            overflow: visible;
        }
    }

    &__item {
        padding: 2px 12px 12px 0;

        &:not(:last-child) {
            border-bottom: 1px solid $c-grey-300;
        }

        &-questions {
          list-style-type: square;
        }

        &-question {
          padding: 5px;
        }

        &-title {
            font-weight: bold;
            padding: 2px 0;
            margin: 0;
        }

        &-content {
            display: block;
            word-break: break-all;
            color: $c-text;

            &--warning {
                color: $c-red;
                margin: 12px 12px 0;
            }

            &--empty {
                color: $c-grey-400;
            }
        }

        &-wordcount {
            padding: 0 2px;
            display: inline-block;
          }

        &-printlocation {
            padding-bottom: 5px;
          }
    }

    &__mainmedia {

        &--nopreview {
            text-transform: capitalize;
        }
    }

    &__image-container {
        max-width: 160px;
        max-height: 80px;
        overflow: hidden;

        @media screen and (max-width: 1400px) {
            max-width: 100px;
        }
    }


    &__image {
        width: 100%;
    }

    &__video {
        max-width: 100%;

        iframe, video {
            max-width: 100%;
        }
    }

    &__icon {
        display: inline-block;
        position: relative;
        top: -1px;
        width: 14px;
        height: 14px;
        margin-right: 3px;
    }

    &__toolbar {
        display: flex;
        flex-direction: row;
        height: 100%;
        background-color: $c-grey-300;

        .content-list-drawer--hidden & {
            display: none;
        }

        &-item {
            flex: 1 0 0;
            height: 100%;
            padding:12px;
            cursor: pointer;
            cursor: hand;
            text-align:center;

            &--spacer {
                flex: 4 0 0;
            }

            &:hover {
                height: 100%;
                background-color: $c-grey-300;
            }

            &:not(:last-child) {
                border-right: 1px solid $c-grey-200;
            }

            &--discreet {
                &:hover {
                    background-color: $c-grey-400;
                }
            }

            &--action {
                background-color: $c-highlight-blue;

                &:hover {
                    background-color: darken($c-highlight-blue, 10%);
                }
            }

            &--danger {
                background-color: $c-red;

                &:hover {
                    background-color: darken($c-red, 10%);
                }
            }

            &--action, &--danger {
                color: white;

                a {
                    color: white;

                    &:hover {
                        color: white;
                    }
                }

                .drawer__icon svg {
                    fill: white;
                }
            }
        }

        &-icon {
            margin-right: 4px;
        }
    }
}

// Usages

.usages-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex: 0 1 33%;
    flex-direction: column;
    flex-wrap: wrap;
    max-height: 300px;
}

.usage {
    padding: 12px;
    max-width: 33%;

    &__title {
        font-weight: bold;
        margin-bottom: 10px;
    }

    &__details {
        display: flex;
        align-items: center;
    }

    &__date {
        padding-right: 3px;
    }

    &--highlight {
        background: $c-white;
        border-top: 2px solid $c-yellow;
    }
}