.cw-blockadder-item-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    grid-auto-rows: auto;
    grid-gap: 4px;
    margin-bottom: 8px;

    .cw-blockadder-item-wrapper {
        display: flex;
        position: relative;
        border: solid thin var(--color--tile-border);
        background-color: var(--color--global-background);
        max-width: 268px;

        .cw-sortable-handle {
            opacity: 0;
        }

        &:hover {
            border-color: var(--color--highlight-hover);

            .cw-sortable-handle {
                opacity: 1;
            }
        }
        .cw-blockadder-item {
            display: inline-flex;
            align-items: flex-start;
            flex-direction: column;
            text-align: left;
            color: var(--color--highlight);
            border: none;
            background-color: var(--white);
            padding: 8px 16px 8px 16px;
            @include icon(before, unit-test, $size: 48px);
            cursor: pointer;

            @each $item, $icon in $blockadder-items {
                &.cw-blockadder-item-#{$item} {
                    @include icon(before, $icon, $size: 48px);
                }
            }
            .cw-blockadder-item-title {
                display: inline-block;
                font-weight: 600;
                margin: 4px 0 2px 0;
            }
            .cw-blockadder-item-description {
                display: inline-block;
                margin: 0 0 4px;   
            }

            &:hover {
                color: var(--color--highlight-hover);
            }
        }
        .cw-blockadder-item-fav {
            height: 32px;
            padding: 8px;
            background-color: transparent;
            color: var(--color--highlight);
            border: none;
            cursor: pointer;
        }
    }
}

.cw-containeradder-item-wrapper {
    position: relative;
    border: solid thin var(--color--tile-border);
    margin-bottom: 4px;
    .cw-sortable-handle {
        opacity: 0;
    }

    &:hover {
        border-color: var(--color--highlight-hover);

        .cw-sortable-handle {
            opacity: 1;
        }
    }

    $containeradder-icon-size: 48px;
    .cw-containeradder-item {
        display: inline-flex;
        gap: 16px;
        border: none;
        background-color: var(--color--global-background);
        min-height: 5em;
        padding: 16px;
        @include icon(before, unit-test, $size: $containeradder-icon-size);
        text-align: left;
        color: var(--color--highlight);
        cursor: pointer;

        
        @each $item, $icon in $containeradder-items {
            &.cw-containeradder-item-#{$item} {
                @include icon(before, $icon, $size: $containeradder-icon-size);
                &::before {
                    min-width: $containeradder-icon-size;
                    min-height: $containeradder-icon-size;
                }
            }
        }

        .cw-containeradder-item-title {
            font-weight: 600;
        }

        &:hover {
            color: var(--color--highlight-hover);
        }
    }
}


$container-style-selector-icon-size: 32px;
.cw-container-style-selector {
    display: flex;
    border-bottom: solid thin var(--color--content-box-border);
    padding-bottom: 8px;
    margin-bottom: 8px;

    label {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        border: solid thin var(--color--tile-border);
        border-right: none;
        padding: 8px 16px;
        color: var(--color--highlight);
        text-align: center;
        width: 33%;
        background-position: center 0.5em;
        background-repeat: no-repeat;
        cursor: pointer;

        &:last-child {
            border-right: solid thin var(--color--tile-border);
        }

        &.full {
            @include icon(before, column-full, $size: $container-style-selector-icon-size);
        }
        &.half {
            @include icon(before, column-half, $size: $container-style-selector-icon-size);
        }
        &.half-center {
            @include icon(before, column-half-centered, $size: $container-style-selector-icon-size);
        }
        &:hover {
            color: var(--color--highlight-hover);
        }
        &.cw-container-style-selector-active {
            background-color: var(--color--tile-background-active);
            border: solid thin var(--color--highlight);
        }
    }
    input[type='radio'] {
        position: absolute;
        opacity: 0;
        width: 0;

        &:focus + label {
            outline-color: Highlight;
            outline-color: -webkit-focus-ring-color;
            outline-style: auto;
            outline-width: 1px;
        }
    }

    &.sortable-ghost {
        background-color: var(--color--highlight-hover);
    }
}
.cw-element-inserter-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    grid-auto-rows: auto;
    grid-gap: 4px;
    margin-bottom: 8px;

    .cw-clipboard-item-wrapper {
        background-color: var(--white);
        display: flex;
        border: solid thin var(--color--tile-border);
        max-width: 248px;
        position: relative;

        .cw-sortable-handle {
            opacity: 0;
        }

        &:hover {
            border-color: var(--color--highlight-hover);

            .cw-sortable-handle {
                opacity: 1;
            }
        }

        $clipboard-item-icon-size: 48px;
        .cw-clipboard-item {
            display: inline-flex;
            flex-direction: column;
            width: calc(100% - 36px);
            padding: 8px 16px;
            @include icon(before, unit-test, $size: $clipboard-item-icon-size);
            cursor: pointer;
            background-color: var(--color--global-background);
            border: none;
            text-align: left;
            color: var(--color--highlight);

            @each $item, $icon in $blockadder-items {
                &.cw-clipboard-item-#{$item} {
                    @include icon(before, $icon, $size: $clipboard-item-icon-size);
                }
            }
            @each $item, $icon in $containeradder-items {
                &.cw-clipboard-item-#{$item} {
                    @include icon(before, $icon, $size: $clipboard-item-icon-size);
                }
            }

            .cw-clipboard-item-title {
                display: inline-block;
                font-weight: 600;
                margin: 4px 0 2px 0;
            }

            .cw-clipboard-item-description {
                display: -webkit-box;
                margin: 0 0 4px;
                max-height: 4em;
                word-break: break-word;
                overflow: hidden;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
            }
        }
        .cw-clipboard-item-action-menu-wrapper {
            padding: 8px;
        }
    }
}
.action-menu.is-open,
.action-menu-wrapper.is-open {
    &.cw-clipboard-item-action-menu {
        z-index: 42;
    }
}