@import "app/styles/variables";

bl-sidebar-bookmarks {
    [bl-dropdown-content] {
        min-width: 200px;
        max-width: 400px;
    }

    .no-bookmarks {
        padding: 10px 5px;
    }

    .dropdown-content .dropdown-item.bookmark {
        position: relative;
        min-width: 250px;
        cursor: pointer;
        padding: 0;
        display: flex;
        align-items: stretch;
        justify-content: stretch;

        &:hover {
            i.fa {
                color: $primary-color-dark;
            }
        }

        > span {
            flex: 1 1 auto;
            text-align: left;
            min-width: 20px;
            text-overflow: ellipsis;
            overflow-x: hidden;
            border-right: 1px solid $border-color;
            padding: 5px 10px;
        }

        > i.fa {
            flex: 0 0 30px;
            color: $primary-color-dark;
            display: flex;
            align-items: center;
            justify-content: center;

            cursor: pointer;

            &:hover {
                background-color: map-get($danger, 400);
            }

            &:active {
                background-color: map-get($danger, 600);
            }
        }
    }

    [bl-dropdown-btn] {
        height: $header-height;
        width: $header-height;
        text-align: center;
        font-size: 20px;
        align-items: center;
        justify-content: center;
        padding-top: 5px;

        .count {
            font-size: 0.7em;
            color: $danger-contrast-color;
            position: absolute;
            left: 0;
            top: 0;
            background-color: $danger-color;
            border-radius: 10px;
            width: 18px;
            height: 18px;
        }
    }
}
