@mixin root-container() { ... }@mixin root-container() { 
  max-width: settings.$max-width;
 }

@mixin canvas-container() { ... }@mixin canvas-container() { 
  display: flex;
  flex-flow: row nowrap;
 }

@mixin canvas-element() { ... }@mixin canvas-element() { 
  width: 100%;
  height: 100%;
  background-color: settings.$canvas-background-color;

  &:focus {
    outline: settings.$canvas-outline-border-width solid settings.$canvas-outline-color;
  }
 }

@mixin canvas-overlay() { ... }@mixin canvas-overlay() { 
  z-index: 999;
  display: flex;
  flex-direction: column;
  margin-left: -100%;
  width: 100%;
  overflow: hidden;

  // Overlay shadow sections
  &::before,
  &::after {
    display: block;
    background-color: settings.$canvas-overlay-background-color;
    content: '';
    flex: 1;
    opacity: settings.$canvas-overlay-opacity;
  }
 }

@mixin controls-container() { ... }@mixin controls-container() { 
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: spacing.get('s4');
  padding-bottom: spacing.get('s4');
 }

@mixin zoom-range-container() { ... }@mixin zoom-range-container() { 
  flex: 1 1 100%;
  max-width: settings.$zoom-range-max-width;

  // @todo This could be set on the component styles by default
  // stylelint-disable-next-line selector-class-pattern
  .kib-range__slider--horizontal {
    align-items: center;
  }
 }

@mixin resize-icon() { ... }@mixin resize-icon() { 
  display: block;
  width: settings.$resize-icon-size-small;
  height: settings.$resize-icon-size-small;
  color: settings.$resize-icon-color;

  &--large {
    width: settings.$resize-icon-size-large;
    height: settings.$resize-icon-size-large;
  }
 }

@mixin rotate-control() { ... }@mixin rotate-control() { 
  @include kib-button-new.base;
  @include kib-button-new.button-styles('action', 'tertiary');

  --kib-button-box-shadow-color: #{settings.$rotate-icon-border-color};

  height: auto;
  padding: spacing.get('s1');
  margin-left: spacing.get('s6');
 }

@mixin rotate-icon() { ... }@mixin rotate-icon() { 
  display: block;
  width: settings.$rotate-icon-size;
  height: settings.$rotate-icon-size;
 }

$max-width: unit.rem(400px) !default;

$canvas-background-color: color.get('static', 'gray1', '900') !default;

$canvas-outline-color: color.get('static', 'gray1', '50') !default;

$canvas-outline-border-width: unit.rem(1px) !default;

$canvas-overlay-background-color: color.get('static', 'gray1', '900') !default;

$canvas-overlay-opacity: 0.4 !default;

$crop-area-grid-line-color: color.get('static', 'gray1', '50') !default;

$zoom-range-max-width: unit.rem(224px) !default;

$resize-icon-color: color.get('link', 'active', 'primary') !default;

$resize-icon-size-small: kib-core.dimensions-get('default') !default;

$resize-icon-size-large: kib-core.dimensions-get('large') !default;

$rotate-icon-size: kib-core.dimensions-get('large') !default;

$rotate-icon-border-color: transparent !default;