#app-panel {
    border: solid 2px black;
    border-radius: 4px;
    box-shadow: var(--shadow-nb);
    max-width: 50vw;
    min-width: 800px;

    margin: auto;
    margin-top: 16px;

    transition: transform 0.1s ease-out;

    &:hover {
        transform: scale(1.01);
    }

    #app-title {
        border-bottom: solid thin black;
        text-align: center;
        background-color: var(--color-primary-100);
    }

    #app-list {
        display: flex;
        flex-direction: column;

        .app-item {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            padding: 8px;

            &:nth-of-type(even) {
                background-color: #eeeeee;
            }

            .app-info {
                display: flex;
                align-items: center;
                gap: 8px;
            }

            .app-item-title {
                border-bottom: 2px var(--color-primary-200) solid;

                &:hover {
                    color: var(--color-primary-500);
                }
            }

            .app-version-info {
                display: flex;
                gap: 2px;
                align-items: center;

                svg {
                    position: relative;
                    top: 1px;
                    fill: var(--color-primary-500);
                    font-size: 1.2rem;
                }
            }

            .app-item-tag {
                font-size: 0.8rem;
                border-radius: 8px;
                padding: 0 8px;

                &.platform {
                    background-color: #5fafc7;
                }

                &.technical_name {
                    background-color: #ffaf67;
                }
            }
        }
    }
}