@define refs {
  name: editor;
}

@provide bar {
  ref: display-flex justifyContent-spaceBetween alignItems-center flexWrap-wrap;
  ref: padding-0.5rem_0.5rem backgroundColor-hexfff color-inherit;
  prefers-dark: backgroundColor-hex2f2f2f borderColor-hex5f5f5f;
  prefers-toDark: backgroundColor-hex2f2f2f borderColor-hex5f5f5f;
  prefers-toLight: backgroundColor-hexfff borderColor-hexd9d9d9;
}

@provide block {
  ref: position-relative display-flex flexDirection-column border-1px_solid_hexd9d9d9;
  ref: borderRadius-0.25rem zIndex-15;
  prefers-dark: borderColor-hex5f5f5f;
  prefers-toDark: borderColor-hex5f5f5f;
  prefers-toLight: borderColor-hexd9d9d9;
}

@alga {refs.name} {
  .{refs.name} {
    ref: width-100pct backgroundColor-hexfff backgroundClip-borderBox wordWrap-breakWord;
    prefers-dark: backgroundColor-hex2f2f2f;
    prefers-toDark: backgroundColor-hex2f2f2f;
    prefers-toLight: backgroundColor-hexfff;
      
    & > *:first-child {
      ref: borderTopRightRadius-0.25rem borderTopLeftRadius-0.25rem;
    }
      
    & > *:last-child {
      ref: borderBottomRightRadius-0.25rem borderBottomLeftRadius-0.25rem;
    }
  }
  
  .{refs.name}Toolbar {
    ref: borderBottom-1px_solid_hexd9d9d9;
    inject: bar;
  }
    
  .{refs.name}Statusbar {
    ref: borderTop-1px_solid_hexd9d9d9;
    inject: bar;
  }
    
  .{refs.name}Content {
    ref: flex-1_1_auto padding-1rem_0.75rem outline-0 display-block position-relative zIndex-14;
    ref: backgroundColor-hexfff borderColor-hexd9d9d9;
    prefers-dark: backgroundColor-hex2f2f2f borderColor-hex5f5f5f;
    prefers-toDark: backgroundColor-hex2f2f2f borderColor-hex5f5f5f;
    prefers-toLight: backgroundColor-hexfff borderColor-hexd9d9d9;
  }
    
  .{refs.name}Menu {
    ref: display-flex paddingLeft-0 margin-0 listStyle-none gap-5px;
  }
    
  .{refs.name}Item {
    ref: display-block padding-0.25rem_0.25rem borderRadius-0.25rem color-hex4a5568;
    ref: textDecoration-none cursor-pointer border-1px_solid_transparent;
    ref-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
    prefers-dark: color-hexd9d9d9;
    prefers-toDark: color-hexd9d9d9;
    prefers-toLight: color-hex4a5568;
    
    &:not(.active):not(.plain):hover {
      ref: backgroundColor-hexf2f2f2 color-inherit borderColor-hexd9d9d9;
      prefers-dark: backgroundColor-hex5f5f5f color-hexd9d9d9 borderColor-hex5f5f5f;
      prefers-toDark: backgroundColor-hex5f5f5f color-hexd9d9d9 borderColor-hex5f5f5f;
      prefers-toLight: backgroundColor-hexf2f2f2 color-inherit borderColor-hexd9d9d9;
    }
    
    &.active {
      ref: backgroundColor-hexe7eefa color-inherit borderColor-hexb8e7fd;
      prefers-dark: backgroundColor-hex4a5568 color-hexb8e7fd borderColor-hexb8e7fd;
      prefers-toDark: backgroundColor-hex4a5568 color-hexb8e7fd borderColor-hexb8e7fd;
      prefers-toLight: backgroundColor-hexe7eefa color-inherit borderColor-hexb8e7fd;
    }
    
    &.plain {
      ref: cursor-default;
    }
  }
     
  .{refs.name}Text {
    inject: block;
  }
    
  .{refs.name}Tooltip {
    ref: position-relative display-flex flexDirection-column;
  }
  
  .{refs.name}Section {
    ref: borderTopLeftRadius-0px;
    
    .{refs.name}Block {
      inject: block;
      ref: borderTopLeftRadius-0px marginTop-47px;
      
      .{refs.name}Toolbar {
        ref: position-absolute top-n45px left-n1px border-1px_solid_hexd9d9d9;
        ref: borderTopRightRadius-0.25rem borderTopLeftRadius-0.25rem zIndex-13;
        prefers-dark: borderColor-hex5f5f5f;
        prefers-toDark: borderColor-hex5f5f5f;
        prefers-toLight: borderColor-hexd9d9d9;
      }
    }
  }
  
  .{refs.name}Backdrop {
    ref: position-fixed zIndex-25 inset-0_3em_3em_0 width-100vw height-100vh display-none; 
  }
    
  .{refs.name}Inline {
    ref: position-relative display-inlineBlock;
    
    .{refs.name}Toolbar {
      ref: visibility-hidden position-absolute zIndex-75 bottom-n47px left-0px display-inlineBlock;
      ref: border-1px_solid_hexd9d9d9 borderRadius-0.25rem;
      prefers-dark: borderColor-hex5f5f5f;
      prefers-toDark: borderColor-hex5f5f5f;
      prefers-toLight: borderColor-hexd9d9d9;
    }
    
    &:hover .{refs.name}Toolbar {
      ref: visibility-visible;
    }
    
    .{refs.name}Toolbar:after {
      ref-content: "";
      ref: position-absolute zIndex-74 top-n16px left-20px marginLeft-n10px borderWidth-8px;
      ref: borderStyle-solid transform-rotate(180deg);
      ref-borderColor: #d9d9d9 transparent transparent transparent;
      prefers-dark: borderColor-hex5f5f5f_transparent_transparent_transparent;
      prefers-toDark: borderColor-hex5f5f5f_transparent_transparent_transparent;
      prefers-toLight: borderColor-hexd9d9d9_transparent_transparent_transparent;
    }
  }
}