@import '../../../../styles/variables';
@import '../../../../styles/mixins';
@import '../../../../../../styles/mixins';

.dialog-shapes-palette {
    $class: &;

    &__palette {
        width: 340px;
        padding: 25px;
        grid-gap: 12px;

        grid-template-columns: repeat(auto-fit, 88px);
        grid-auto-rows: 88px;
    }

    &__palette-item {
        &.palette-item_default {
            color: var(--g-color-text-primary);
            font-size: var(--g-text-body-1-font-size);
            font-weight: var(--g-text-body-font-weight);
        }

        &::before {
            @include palette-item-border(var(--g-color-line-generic), 1, 1px, 6px);
        }
    }

    &__value-shape {
        margin-right: 8px;
        border-radius: 4px;
        display: flex;

        width: 24px;
        flex-shrink: 0;
        justify-content: center;

        &#{$class}__value-shape_default {
            width: 24px;
        }

        &_default {
            width: 20px;
            border: 1px solid var(--g-color-line-generic);
            color: var(--g-color-text-secondary);
            font-size: 10px;
            font-weight: 500;
            text-transform: uppercase;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}
