@import 'node_modules/argo-ui/src/styles/config';

$applications-list-label-min: 5.75rem;
$applications-list-xxlarge: calc(map-get($breakpoints, xxlarge) - 1px);

.applications-table {

    .argo-table-list__row {
        line-height: 26px;
        padding-top: 4px;
        padding-bottom: 4px;
        padding-left: 2em;

        .columns:last-child {
            .argo-dropdown {
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
            }
        }
    }

    .applications-list__table-row.applications-table-row--with-hydrator {
        .columns.small-4,
        .columns.small-6 {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
    }

    .applications-list__table-row button.managed-by-url-invalid {
        color: #f4c030;

        &:hover {
            color: #f4c030;
        }
    }

    .applications-list__meta-column {
        display: flex;
        align-items: flex-start;
        width: 100%;
    }

    .applications-list__fav-col {
        flex-shrink: 0;
        padding-left: 0;
        padding-right: 10px;

        button {
            padding: 0;
            margin: 0;
            line-height: 1;
        }

        .applications-list__external-links-icon-container {
            display: inline-block;
            margin-left: 0.125rem;
        }
    }

    .applications-list__meta-rows {
        flex: 1;
        min-width: 0;
    }

    .applications-list__meta-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);

        @media screen and (min-width: $applications-list-xxlarge) {
            grid-template-columns: minmax($applications-list-label-min, 2fr) minmax(0, 8fr);
            column-gap: 0.25rem;
        }
    }

    .applications-list__meta-label {
        min-width: $applications-list-label-min;
        white-space: nowrap;
    }

    .applications-list__meta-value {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .applications-list__meta-value.applications-table-source {
        position: relative;
        display: flex;
        justify-content: space-between;
        overflow: visible;

        .applications-table-source__link {
            flex: 1;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .applications-table-source__labels {
            max-width: 40%;
            flex-shrink: 0;
        }
    }
}
