// stylelint-disable max-nesting-depth, selector-max-compound-selectors
.node-card {
    width: 100%;
    margin: 10px 0;

    .card-contents {
        display: flex;
        flex-direction: row;

        .header-container {
            display: flex;
            flex-direction: row;
            
            .h4-container {
                width: 100%;

                .heading {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    justify-content: flex-start;
                    align-items: flex-start;

                    :global(.ember-content-placeholders-heading__title) {
                        height: 1em;
                        margin-top: 5px;
                        margin-bottom: 5px;

                        &:first-child {
                            width: 100%;
                        }
                    }

                    .label-danger {
                        background-color: $brand-danger;
                    }

                    & > span {
                        line-height: 1.5;
                    }

                    .label-info {
                        background-color: darken($brand-info, 15%);
                    }

                    .label-primary {
                        background-color: #337ab7;
                    }

                    .label {
                        display: inline;
                        padding: 0.2em 0.6em 0.3em;
                        font-size: 75%;
                        font-weight: 700;
                        color: #fff;
                        text-align: center;
                        white-space: nowrap;
                        vertical-align: baseline;
                        border-radius: 0.25em;
                    }

                    .osf-link {
                        margin-left: 5px;
                        margin-top: 2px;

                        &.mobile {
                            margin-left: 0;

                        }
                    }
                }
            }

            .component-triangle-container {
                display: none;
            }

        }

        .body {
            :global(.ember-content-placeholders-text__line) {
                height: 1em;
                margin-bottom: 5px;
            }

            dl {
                margin-bottom: 10px;

                div {
                    display: flex;
                    
                    dt {
                        width: 125px;
                        margin-right: 5px;
                    }

                    dd {
                        flex: 1;
                    }
                }
            }

            .tags {
                margin-top: 2px;
            }

            .description {
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                width: calc(100% - 100px);
            }
        }

        .card-body {
            width: 80%;

            &.mobile {
                width: 90%;
            }
        }

        .node-body {
            width: 100%;

            .h4-container {
                width: calc(100% - 50px);
                display: flex;
                align-items: center;
            }

            .component-triangle-container {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                width: 50px;
            }
        }
    }
}


.link {
    composes: Button from '../button/styles.scss';
    composes: SecondaryButton from '../button/styles.scss';
    composes: MediumButton from '../button/styles.scss';

    &:hover {
        text-decoration: none !important; /* override OsfLink hover style */
    }
}

.open-badges {
    width: 20%;
    border-left-width: thin;
    border-left-color: $color-bg-gray-light;
    border-left-style: solid;
    padding-left: 10px;

    &.mobile {
        width: 10%;
        padding-left: 0;
    }
}

.dropdown {
    padding-left: 5px;

    .dropdown-button {
        padding: 4px 12px;
        line-height: 0;
    }
}

.dropdown-list.dropdown-list {
    background-color: $color-bg-gray-light;
    min-width: 180px;

    ul {
        list-style: none;
        padding-inline-start: 0;
    }

    li {
        margin: 10px 0;
    }

    .dropdown-link {
        color: $color-link-black;
        border-color: transparent;
        background-color: $color-bg-gray-light;
        min-width: 180px;
        text-align: left;
        padding: 3px 20px;
    }

    .dropdown-link:hover,
    .dropdown-link:focus {
        cursor: pointer;
        background-image: none;
        background-color: $color-bg-gray-dark;
    }
}

.list-group-item-heading {
    margin-top: 0;
    margin-bottom: 5px;
}

.pull-right {
    float: right !important;
}

.update-button {
    color: $color-text-blue-dark;
}
