@layer kz-components {
  /* 
  Use different tokens with different opacities across the Zen and Heart themes, by assuming that when Zen is applied there won't be any CSS variables declared.
  */

  :root {
    --dt-content-border-color: rgb(var(--color-gray-600-rgb), 0.1);
  }

  .wrapper {
    width: 100%;
    border: 0;
    margin: 0;
    border-radius: var(--border-solid-border-radius);

    /* 
    This is here to protect against a global style in a consumer.
    https://github.com/cultureamp/murmur/blob/master/app/assets/stylesheets/legacy/modules/_body.scss
    */
    visibility: visible;
  }

  .content,
  .menuSeparator {
    border-top: 1px solid var(--dt-content-border-color);
  }

  .canvas {
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-color: var(--dt-content-border-color);
  }

  .reversed {
    border-color: rgb(var(--color-white-rgb), 0.1);
  }

  .menuSeparator {
    margin: 5px 0;
  }
}