.mindmap
{
    position: relative;
    z-index: 0;
    overflow: hidden;
}
.mindmap-container
{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: #fff;
  border: 1px solid #e5e5e5;

  &.dragging
  {
    cursor: pointer;
  }
}
.mindmap-bg
{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  max-width: inherit;
}
.mindmap-desktop
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  overflow: hidden;
  -moz-user-select: none; 
  -webkit-user-select: none;
}

.mindmap-node
{
    position: absolute;
    border-radius: 24px;

    > .wrapper
    {
        border-radius: 22px;
        background: @color-pale;
        border: 4px solid #aaa;
        min-height: 28px;
        .transition-fast();

        > .text
        {
            // max-width: 300px;
            font-weight: bold;
            padding: 8px 12px;
            font-size: 14px;
            cursor: default;

            * {display: inline;}
            br {display: none}

            &:focus
            {
                outline: none
            }

            &:empty:not(:focus)
            {
                min-height: 10px;
                min-width: 10px;
                background: lighten(@input-border-focus, 18%);
                border-radius: 50%;
                position: relative;
                top: 7px;
            }
        }

        > .caption {display: none}
    }

    &:hover
    {
        .box-shadow(~"0 0 5px rgba(0, 0, 0, 0.4)");

        > .wrapper
        {
            border-color: #999
        }
    }

    &[data-type="root"]
    {
        > .wrapper
        {
            min-height: 45px;
            min-width: 45px;

            > .text
            {
                text-align: center;

                &:empty:not(:focus)
                {
                    min-height: 37px;
                    min-width: 37px;
                    background: none;
                    border-radius: 50%;
                    top: 0;
                }
            }
        }
    }

    &[data-type="sub"]
    {
        border-radius: 6px;
        > .wrapper
        {
            background: @color-back;
            border-radius: 5px;
            border-width: 2px;

            > .text
            {
                font-size: 13px;
                padding: 3px 5px;
                font-weight: normal;

                &:empty:not(:focus)
                {
                  background: none;
                }
            }
        }
    }

    &[data-type="node"]
    {
        border-radius: 4px;
        > .wrapper
        {
            background: transparent;
            border-radius: 3px;
            border: 2px solid transparent;

            > .text
            {
                font-size: 13px;
                padding: 3px 3px;
                font-weight: normal;
            }
        }

        &:hover
        {
            > .wrapper
            {
                color: @color-fore;
                border-color: #999;
                background: @color-back;
            }
        }
    }

    &.active,
    &.active:hover,
    &.drag-shadow
    {
        z-index: 900;
        .box-shadow(~"none");

        > .wrapper
        {
            border-color: lighten(@input-border-focus, 10%);
            color: @color-back;
            background: lighten(@input-border-focus, 18%)
        }

    }

    &.focus,
    &.focus:hover,
    &.drop-to,
    {
        @color-rgba: rgba(red(@input-border-focus), green(@input-border-focus), blue(@input-border-focus), .6);
        .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");

        > .wrapper
        {
            border-color: @input-border-focus;
            background: @color-back;
            color: @color-fore;

            > .text
            {
                cursor: text;
            }
        }
    }
}

.mindmap-shadow
{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1000;
    .transition();

    &.shadow-left,
    &.shadow-right
    {
        width: 20px;
        top: 0;
    }

    &.shadow-left
    {
        left: -20px;
    }

    &.shadow-right
    {
        right: -20px;
    }

    &.shadow-top,
    &.shadow-bottom
    {
        height: 20px;
        left: 0;
    }

    &.shadow-top
    {
        top: -20px;
    }

    &.shadow-bottom
    {
        bottom: -20px;
    }
}
.shadow-left > .shadow-left,
.shadow-right > .shadow-right,
.shadow-top > .shadow-top,
.shadow-bottom > .shadow-bottom
{.box-shadow(~"0 0 8px rgba(0, 0, 0, 0.8)");}

