.ff-applications-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    > li {
        > *:not(.ff-dialog-container) {
            border-left: 1px solid $ff-grey-300;
            border-right: 1px solid $ff-grey-300;
            background-color: $ff-grey-50;
        }

        > section:last-of-type {
            border-bottom-left-radius: 6px;
            border-bottom-right-radius: 6px;
            border-bottom: 1px solid $ff-grey-300;
        }

        > :first-child {
            border-top-left-radius: 6px;
            border-top-right-radius: 6px;
            border-top: 1px solid $ff-grey-300;
        }

        > :last-child {
            border-bottom-left-radius: 6px;
            border-bottom-right-radius: 6px;
            border-bottom: 1px solid $ff-grey-300;
        }
    }
    .ff-application-list--app {
        background-color: white !important;
        display: flex;
        justify-content: space-between;
        padding: 12px;
        border: 1px solid $ff-grey-300;
        >span {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        &:hover {
            cursor: pointer;
            border-color: $ff-blue-600;

            .ff-application-list--icon,
            .ff-application-list--icon .ff-icon {
                color: $ff-blue-600;
            }
        }
    }
    .ff-applications-list--instance {
        display: flex;
        flex-direction: column;
        span {
            color: $ff-grey-400;
            font-size: 0.75rem;;
        }
    }
    .delimiter {
        font-size: 0.875rem;
        color: $ff-grey-500;
        display: flex;
        align-items: center;
        gap: 6px;

        &::after {
            content: '';
            height: 1px;
            flex-grow: 1;
            margin-left: 9px;
            background-color: $ff-grey-300;
        }
    }
}

.ff-applications-list-instances {
    padding: 12px;
    padding-top: 6px;
    display: flex;
    flex-direction: column;
    >label {
        font-size: 0.875rem;
        color: $ff-grey-500;
        display: flex;
        align-items: center;
        gap: 12px;
        &::after {
            content: '';
            height: 1px;
            flex-grow: 1;
            background-color: $ff-grey-300;
        }
    }
    > .items-wrapper {
        background-color: white;
        border-color: $ff-grey-300;
        border-width: 1px;
        border-style: solid;
        border-radius: 6px;
        padding: 12px;
        display: grid;
        align-items: center;
        grid-template-columns: 40px 1fr 100px minmax(auto, 220px) 350px;
        &:hover {
            cursor: pointer;
            border-color: $ff-blue-600;
            .ff-application-list--instance {
                color: $ff-blue-600;
            }
            .ff-icon {
                color: $ff-blue-600;
            }
        }
    }

    .actions {
        display: flex;
        justify-content: flex-end;
        gap: 9px;
    }
}

.ff-applications-list-instances {
    flex: 1;
    padding: 12px;
    padding-top: 6px;

    .items-wrapper {
        display: flex;
        flex: 1;
        background: none;
        border: none;
        padding: 0;
        gap: 5px;
        margin-top: 10px;

        .ff-counter {
            min-width: 125px;
        }
    }

    .empty-message {
        min-height: 75px;
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: center;
        gap: 2px;
        color: $ff-grey-500;
    }
}

.ff-applications-list--details {
    color: $ff-grey-400;
    font-size: 0.875rem;
    padding-bottom: 12px;
    text-align: center;
}
