/**
 * Public mixins intended to be used by external package consumers
 * to modify editor blocks core properties (width, alignment, etc).
 */

@mixin editor-styles {
    [data-slate-editor] {
        @content;
    }
}

@mixin editor-block-styles($type: null, $layout: null) {
    @if ($type == null) {
        > [data-slate-block] {
            @if ($layout == null) {
                @content;
            } @else {
                &[data-slate-block-layout="#{$layout}"] {
                    @content;
                }
            }
        }
    } @else if ($type == "rich" or $type == "regular") {
        > [data-slate-block="rich"] {
            @if ($layout == null) {
                @content;
            } @else {
                &[data-slate-block-layout="#{$layout}"] {
                    @content;
                }
            }
        }
    } @else {
        > [data-slate-type="#{$type}"] {
            @if ($layout == null) {
                @content;
            } @else {
                &[data-slate-block-layout="#{$layout}"] {
                    @content;
                }
            }
        }
    }
}

@mixin editor-width(
    $block-width: "auto",
    $rich-block-width: "inherit",
    $expanded-block-width: "inherit",
    $full-width-block-width: 100%
) {
    @include editor-styles {
        @include editor-block-styles {
            margin-left: auto;
            margin-right: auto;
            max-width: $block-width;
        }

        @if $rich-block-width != "inherit" {
            @include editor-block-styles($type: "rich") {
                max-width: $rich-block-width;
            }
        }

        @if $expanded-block-width != "inherit" {
            @include editor-block-styles($layout: "expanded") {
                max-width: $expanded-block-width;
            }
        }

        @if $full-width-block-width != "inherit" {
            @include editor-block-styles($layout: "full-width") {
                max-width: $full-width-block-width;
                width: $full-width-block-width;

                @if $full-width-block-width != "auto" {
                    margin-left: calc((100% - $full-width-block-width) * 0.5);
                }
            }
        }
    }
}