ui/src/app/applications/components/application-sync-panel/application-sync-panel.scss
@import 'node_modules/argo-ui/src/styles/config';

.application-sync-panel__resource {
    margin-top: 0.5em;
    white-space: nowrap;

    &:nth-of-type(odd) {
        background: $argo-color-gray-3;

        .theme-dark & {
            background: $argo-color-gray-6;
        }
    }

    &:nth-of-type(odd) {
        background: #e0e0e0;
    }

    .container {
        max-width: 30em;
        white-space: nowrap;
        display: inline-block;
        margin-right: 0.3em;


        label {
            cursor: pointer;
        }

        label::before,
        label::after {
            vertical-align: middle;
            display: inline-block;
            max-width: 50%;
            overflow: hidden;
            white-space: pre;
        }

        label::before {
            content: attr(content-start);
            text-overflow: ellipsis;
        }

        label::after {
            content: attr(content-end);
            text-overflow: clip;
            direction: rtl; // This is to help put the ellipsis in the middle instead of at the end of the resource path
        }
    }
}