daggerheart/styles/less/dialog/beastform/beastform-container.less

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

.application.daggerheart.dh-style.views.beastform-selection {
    .beastforms-container {
        display: flex;
        flex-direction: column;
        gap: 4px;

        .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(@beige, @dark);
                    background-image: url('../assets/parchments/dh-parchment-light.png');
                }
            }
        }
    }
}