luyadev/luya-module-cms

.blockholder-column {
    width: $blockholder-width;
    padding-left: 0;
    padding-right: 0;
    display: none;
    height: 100vh;
    right: 0;
    position: fixed;

    transform: translateX(0) translateZ(0);

    @media (min-width: $mobile-nav-breakpoint) {
        display: block;
    }
}

.blockholder-column-small {

    .blockholder  {
        padding: 10px;
    }

    transform: translateX(205px);

    .blockholder-search {
        display: none;
    }

    .blockholder-item {

        span {
            visibility: hidden;
        }

        padding: 5px;

        max-width: 30px;
        max-height: 30px;
    }

    .blockholder-group-title {
        span {
            visibility: hidden;
        }
    }

    .blockholder-favorite, .blockholder-clear-button {

        display: none;

        max-width: 12px;
        padding-left: 2px;

        i {
            font-size: 8px;
        }
    }
}

.blockholder {
    background-color: color(gray);
    color: map-get($grays, 500);
    display: block;
    height: 100%;
    padding: 15px;
    width: 100%;
    user-select: none;
    overflow-y: auto;
}

.blockholder-search {
    border-bottom: 1px solid $white;
    display: block;
    margin: 0 0 30px;
    padding-right: 25px;
    position: relative;
    width: 100%;
}

.blockholder-search-input {
    background: none;
    border: none;
    color: $white;
    outline: 0;
    padding-top: 5px;
    width: 100%;
}

.blockholder-search-label {
    color: $white;
    display: inline-block;
    font-size: 20px;
    margin: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

.blockholder-group-title {
    color: color(white);
    cursor: pointer;
    display: block;
    margin-bottom: 5px;
    padding-left: 32px;

    .blockholder-group:not(:first-of-type) & {
        margin-top: 30px;
    }

    .material-icons {
        font-size: 20px;
        margin-left: -28px;
        margin-right: -3px;
    }

    .blockholder-group-favorites & {
        color: theme-color(primary);
    }

    .blockholder-group-copy-stack & {
        padding-right: 40px;
        position: relative;
    }
}

.blockholder-clear-button {
    display: block;
    padding: 3px 6px 5px 6px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: .25s ease-in-out background-color;

    .material-icons {
        color: color(red);
        font-size: 20px;
        margin: 0;
    }

    &:hover {
        background-color: color(white);
    }
}

.blockholder-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.blockholder-item {
    border: 1px solid transparent;
    padding: 4px 2px 3px 30px;
    position: relative;
    transition: .2s ease-in-out border;

    &:not(:first-of-type) {
        margin-top: 5px;
    }

    &:hover {
        border-color: map-get($grays, 600);
        cursor: move;
        border-radius: $border-radius;
    }

    .blockholder-icon {
        font-size: 20px;
        left: 3px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);

        + span {
            margin-left: 0;
        }
    }
}

.blockholder-favorite {
    background-color: rgba(color(gray), .8);
    border: none;
    bottom: 0;
    color: theme-color(primary);
    font-size: 16px;
    opacity: 0;
    padding: 0 8px 3px 8px;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    transition: .25s ease-in-out opacity, .25s ease-in-out color, .25s ease-in-out background-color;

    .blockholder-item:hover & {
        cursor: pointer;
        opacity: 1;
        pointer-events: all;
    }
    &:hover {
        background-color: $white;
        color: color(red);
    }

    &-clear {
        padding: 0 6px 3px 6px;
    }
}

.blockholder-group-toggled .blockholder-toggle-icon {
    transform: rotate(-90deg);
}

.blockholder-toggler {
    background: map-get($grays, 700);
    border: none;
    border-radius: $border-radius;
    cursor: pointer;
    display: none;
    margin: 0;
    min-height: 42px;
    outline: none !important;
    padding: 0;
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    transition: background .25s ease-in-out, min-height .2s ease-in-out;;
    width: 16px;

    i {
        color: map-get($grays, 100);;
        transition: transform .25s ease-in-out, color .25s ease-in-out
    }

    &:hover {
        background: color(gray);
        min-height: 72px;

    }

    &-open {

        i {
            transform: rotate(180deg);
        }
    }

    @media (min-width: $mobile-nav-breakpoint) {
        display: block;
    }
}