@require "../stylus/index";

.app-resizeable {
  --separator: var(--t3-fg);
  --separator-hover: var(--fg);
  --separator-active: var(--p1-fg);
  use: stack-y;
  width: 100%;
  height: 600;
  background: -blue-100;

  .left {
    background: -red-100;
    // border: 1px dotted -red-500;
    padding: 8;
    use: center;
  }

  .middle {
    use: stack-x;
  }

  .right {
    background: -green-100;
    // border: 1px dotted -green-500;
    padding: 8;
    use: center;
  }

  .top {
    background: -purple-100;
    // border: 1px dotted -purple-500;
    padding: 8;
    use: center;
  }

  .bottom {
    background: -orange-100;
    // border: 1px dotted -orange-500;
    padding: 8;
    use: center;
  }

  .center {
    use: center;
  }
}