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

.appTheme({
    &.beastform-selection {
        .beastforms-container .beastforms-tier .beastform-container .beastform-title {
            background-image: url('../assets/parchments/dh-parchment-dark.png');
        }
    }
}, {});

.application.daggerheart.dh-style.views.beastform-selection {
    transition: all 0.3s ease;

    &.expanded {
        width: 900px !important;

        .beastforms-outer-container .advanced-container {
            max-width: 300px;
        }
    }

    .beastforms-outer-container {
        display: flex;
        overflow: hidden;

        .beastforms-container {
            display: flex;
            flex-direction: column;
            gap: 4px;
            max-width: 566px;

            .beastforms-tier {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr 1fr;
                gap: 4px;

                .beastform-container {
                    position: relative;
                    display: flex;
                    justify-content: center;
                    border: 1px solid light-dark(@dark-blue, @golden);
                    border-radius: 6px;
                    cursor: pointer;

                    &.inactive {
                        opacity: 0.4;
                    }

                    img {
                        width: 100%;
                        border-radius: 6px;
                    }

                    .beastform-title {
                        position: absolute;
                        top: 4px;
                        display: flex;
                        flex-wrap: wrap;
                        font-size: 16px;
                        margin: 0 4px;
                        border: 1px solid light-dark(@dark-blue, @golden);
                        border-radius: 6px;
                        color: light-dark(@dark, @beige);
                        background-image: url('../assets/parchments/dh-parchment-light.png');
                    }
                }
            }
        }

        .advanced-container {
            max-width: 0;
            transition: all 0.3s ease;
        }
    }

    // .advanced-container {
    //     position: absolute;
    //     top: 0;
    //     right: -300px;
    //     height: 100%;
    //     width: 300px;
    //     border: 1px solid @golden;
    //     background: url("../systems/daggerheart/assets/parchments/dh-parchment-light.png") no-repeat center;
    // }

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

        button {
            flex: 1;
        }
    }
}