@import "~styles/colors";

package-management {
    .column {
        padding-left: 3px;
        padding-right: 3px;
    }

    .column-header {
        flex: 0 0 35px;
        display: flex;
        align-items: center;
        margin-bottom: 5px;
        border-bottom: var(--border-color) 1px solid;
    }

    .details-list {
        word-break: break-word;

        li {
            margin-bottom: 5px;
        }
    }

    .package-version-picker-modal-wrapper {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 10;
        background-color: rgb(0 0 0 / 50%);

        .package-version-picker-modal {
            height: 60%;
            width: 25%;
            background-color: #313131;
            padding: 10px;
        }
    }

    .package {
        &.active {
            @extend %bg-blue-muted;
        }

        &.active .package-description {
            b::selection,
            small::selection,
            p::selection {
                background: orange;
            }
        }

        .package-container {
            display: flex;
            align-items: center;

            .package-description {
                flex-grow: 1;
                min-width: 0;
            }

            .package-actions {
                flex: 0 0 120px;
                text-align: right;
            }
        }
    }

    .dropdown-item i {
        margin-right: 4px;
    }

    .search-bottom-bar {
        border-top: var(--border-color) 1px solid;
    }
}
