@import '../../utils/mixin.less';

.theme-light .daggerheart.dialog.dh-style.views.tag-team-dialog {
    .initialization-container .members-container .member-container {
        .member-name {
            background-image: url('../assets/parchments/dh-parchment-light.png');
        }
    }
}

.daggerheart.dialog.dh-style.views.tag-team-dialog {
    .initialization-container.active {
        display: flex;
        flex-direction: column;
        gap: var(--spacer-4);

        h2 {
            text-align: center;
        }

        .members-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 8px;

            // Force 3 columns for 5 -> 6 players
            &:has(> :nth-child(5)):not(:has(> :nth-child(7))) {
                padding-left: 10%;
                padding-right: 10%;
            }

            .member-container {
                position: relative;
                display: flex;
                align-items: stretch;
                justify-content: center;
                border-radius: 6px;
                border: 1px solid light-dark(@dark-blue, @golden);
                overflow: hidden;
                height: 11.5rem;
                width: 122px;

                &.inactive {
                    border-color: light-dark(@dark-blue-40, @golden-40);
                    img {
                        opacity: 0.4;
                    }
                }

                .member-name {
                    --shadow-color: light-dark(white, black);
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;

                    display: flex;
                    flex-direction: column;
                    justify-content: flex-end;
                    min-height: 4rem;
                    padding: 5rem 4px var(--spacer-8) 4px;
                    text-align: center;

                    color: @color-text-primary;
                    text-shadow: 1px 1px 2px var(--shadow-color), 0 0 10px var(--shadow-color);
                    .smooth-gradient-ease-in-out(background-image, to bottom, var(--shadow-color), 100%);
                }

                img {
                    object-fit: cover;
                    object-position: top center;
                    flex: 1;
                }

                .leader-mark {
                    position: absolute;
                    top: 4px;
                    right: 4px;
                    text-shadow: var(--shadow-text-stroke), 0 0 20px black;
                }
            }
        }

        .initiator-container {
            margin-top: 8px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;

            &.inactive {
                opacity: 0.4;
            }
        }

        footer {
            margin-top: 8px;
            display: flex;
            gap: 8px;

            button {
                flex: 1;
            }

            .finish-tools {
                flex: none;
                display: flex;
                align-items: center;
                gap: 4px;

                &.inactive {
                    opacity: 0.4;
                }
            }
        }
    }
}
