:root {
  --toolbar-width: calc(8*36px + 10px + 20px + 30px);
  --toolbar-height: 44px;

  --border-size: 5px; // Equals to ZONE_BORDER
  --border-color: #B2F2BB;

  --color-picker-blue:   #1971C2; // Equals to colorList
  --color-picker-red:    #E03131;
  --color-picker-green:  #2F9E44;
  --color-picker-orange: #F08C00;
  --color-picker-black:  #1E1E1E;
}

html, body {
  height: 100%;
  width:100%;
  margin: 0;
  overflow: hidden;
}

body {
  display: block;

  #root {
    user-select: none;
    height: 100%;
    display: flex;

    #root_wrapper {
      width: 100%;
      height: 100%;

      #whiteboard {
        position: absolute;
        width: 80%;
        height: 80%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;

        /* https://www.magicpattern.design/tools/css-backgrounds */
        background-color: #f5faff;
        background-image: radial-gradient(#9d9d9d 0.8px, #f5faff 0.8px);
        background-size: 16px 16px;
      }

      #zone_borders {
        border-style: solid;
        border-width: var(--border-size);
        border-color: var(--border-color);
        border-radius: 10px;
        box-sizing: border-box;

        position: absolute;
        width: 100%;
        height: 100%;

        z-index: -1;

        &::before {
          content: "";
          position: absolute;
          top: calc(var(--border-size) * -1);
          left: calc(var(--border-size) * -1);
          height: 100%;
          width: 100%;

          border-style: solid;
          border-width: var(--border-size);
          border-color: var(--border-color);
          border-radius: 20px;
          outline: var(--border-size);
        }
      }

      &.manipulation_mode {
        #toolbar {
          pointer-events: none;
        }
      }
    }
  }
}

@font-face {
  font-family: 'Excalifont';
  src: url('../../../assets/Excalifont-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
