@use "variables" as *;

:host {
    background: $white;
    border-left: 1px solid $color-palette-gray-300;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: $content-palette-width;
    padding: $spacing-1;
    position: relative;
    text-align: center;
    transition: all $basic-speed ease-in-out;
    width: $content-palette-width;
}

.dot-content-palette__items {
    margin-bottom: 50px;
    overflow: hidden auto;

    div {
        color: $black;
        cursor: grab;
        display: flex;
        overflow: hidden;
        padding: 0.25rem $spacing-1;
        position: relative;
        text-align: center;

        &:hover {
            background: $color-palette-gray-200;
        }

        img {
            height: 48px;
            object-fit: contain;
            width: 48px;
        }

        p {
            align-self: center;
            display: -webkit-box;
            font-size: $font-size-sm;
            margin: 0 0 0 $spacing-1;
            overflow: hidden;
            text-align: left;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
    }

    p-paginator {
        bottom: 0;
        left: 1px;
        position: absolute;
        width: 100%;
    }
}

.dot-content-palette__empty {
    text-align: center;
    padding: $spacing-1 0;
    margin: $spacing-4;
}
