@define refs {
  name: offCanvas;
}

@define props {
  width: 300px;
}

@alga {refs.name} {
  .{refs.name} {
    ref: position-absolute zIndex-25 top-0 left-0 maxWidth-100vw maxHeight-100vh;

    html[dir=rtl] &,
    &.right {
      ref: left-auto right-0;
    }
  }
   
  .{refs.name}Backdrop {
    ref: position-fixed zIndex-26 inset-0_3em_3em_0 width-100pct height-100pct display-none;
    ref: backgroundColor-rgba(0,0,0,0.5);
    
    html[dir=rtl] & {
      ref: inset-0_0_3em_3em;
    }
  }
  
  .{refs.name}Content {
    ref: position-fixed zIndex-27 backgroundColor-hexfff border-1px_solid_hexd9d9d9 marginRight-auto;
    ref: width-{props.width} height-100pct minHeight-100vh display-none;
    prefers-dark: backgroundColor-hex2f2f2f borderColor-hex5f5f5f;
    prefers-toDark: backgroundColor-hex2f2f2f borderColor-hex5f5f5f;
    prefers-toLight: backgroundColor-hexfff borderColor-hexfff;

    .{refs.name}.right & {
      ref: marginLeft-n{props.width};
    }

    html[dir=rtl] & {
      ref: marginLeft-auto;
    }
    
    html[dir=rtl] .{refs.name}.right & {
      ref: marginLeft-auto;
    }

    .{refs.name}Header, .{refs.name}Footer {
      ref: display-flex justifyContent-spaceBetween padding-0.75rem;
    }

    .{refs.name}Body {
      ref: flexGrow-1 overflowX-hidden overflowY-auto padding-0.75rem;
    }
  }
  
  .{refs.name}.active {
    .{refs.name}Backdrop {
      ref: display-block;
    }

    .{refs.name}Content {
      ref: display-flex flexDirection-column;
    }
  }
}