/**
 * Styles for the Parameters tool.
 */

@import "src/main/app/Resources/styles/mixins";
@import "src/main/app/Resources/styles/variables";

// TODO : to move in ThemeBundle
.theme-icon-preview-container {
    display: flex;
    flex-wrap: wrap;
    margin: -2px;

    .theme-icon-preview {
        padding: 10px;
        border: 1px solid $card-border-color;
        margin: 2px;
        font-size: 0; // avoid extra space under svg element

        .theme-icon { // to merge with .type-icon
            width: 40px;
            height: 40px;
            min-width: 40px; // for correct alignment

            &.lg {
                width: 64px;
                height: 64px;
                min-width: 64px; // for correct alignment
            }

            &.sm {
                width: 24px;
                height: 24px;
                min-width: 24px; // for correct alignment
            }
        }
    }
}


.color-chart-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.color-chart-colors-list {
    margin: -2px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.color-dot-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    //padding: 0 15px 10px;

    .color-dot-config {
        position: relative;
        //display: flex;
    }

    .color-dot {
        margin: map-get($spacers, 2);
    }

    .btn {
        position: absolute;
        top: 0;
        right: 0;
        margin: -4px;
        padding: 4px;
        width: 34px;
        height: 34px;
    }
}
