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

.application.daggerheart.dh-style.dialog {
    .tab.features {
        max-height: 450px;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: light-dark(@dark-blue, @golden) transparent;

        .add-feature-btn {
            width: 100%;
            height: 38px;
            margin-bottom: 12px;
        }

                .feature-list,
        .features-dragger {
            display: flex;
            width: 100%;
            font-family: @font-body;
        }

        .feature-list {
            flex-direction: column;
            gap: 10px;

            .feature-item {
                display: grid;
                grid-template-columns: 40px 1fr auto;
                align-items: center;
                gap: 5px;
                border-radius: 3px;

                img {
                    height: 40px;
                    width: 40px;
                    object-fit: cover;
                }

                .label {
                    font-family: @font-body;
                }

                .controls {
                    display: flex;
                    gap: 5px;
                    a {
                        text-align: center;
                    }
                }
            }
        }

        .features-dragger {
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            height: 40px;
            margin-top: 10px;
            border: 1px dashed light-dark(@dark-blue-50, @beige-50);
            border-radius: 3px;
            color: light-dark(@dark-blue-50, @beige-50);
        }
    }
}