@layer utils {
  @property --box-rounded-radius {
    syntax: "<length>";
    inherits: false;
    initial-value: 4px;
  }

  @property --box-border-width {
    syntax: "<length>";
    inherits: false;
    initial-value: 2px;
  }

  @property --box-double-border-width {
    syntax: "<length>";
    inherits: false;
    initial-value: 1px;
  }

  [box-=square],[box-=round],[box-=double] {
    position:relative;
    isolation:isolate;
    padding:1lh 1ch
  }

  [box-=square]:before,[box-=round]:before,[box-=double]:before {
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    translate:-50% -50%;
    width:calc(100% - 1ch - var(--box-border-width));
    height:calc(100% - 1lh - var(--box-border-width));
    border:solid var(--box-border-width) var(--box-border-color);
    z-index:-1
  }

  [box-=square][box-=round]:before,[box-=round][box-=round]:before,[box-=double][box-=round]:before {
    border-radius:var(--box-rounded-radius)
  }

  [box-=square][box-=round]:after,[box-=round][box-=round]:after,[box-=double][box-=round]:after {
    border-radius:calc(var(--box-rounded-radius) + 2px)
  }

  [box-=square][box-=double]:before,[box-=round][box-=double]:before,[box-=double][box-=double]:before {
    border-width:var(--box-double-border-width)
  }

  [box-=square][box-=double]:after,[box-=round][box-=double]:after,[box-=double][box-=double]:after {
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    translate:-50% -50%;
    width:calc(100% - 1ch + var(--box-double-border-width) * 2);
    height:calc(100% - 1lh + var(--box-double-border-width) * 2);
    border:solid var(--box-double-border-width) var(--box-border-color);
    z-index:-1
  }

  [box-=square][shear-=both],[box-=round][shear-=both],[box-=double][shear-=both] {
    padding-top:0;
    padding-bottom:0
  }

  [box-=square][shear-=top],[box-=round][shear-=top],[box-=double][shear-=top] {
    padding-top:0
  }

  [box-=square][shear-=bottom],[box-=round][shear-=bottom],[box-=double][shear-=bottom] {
    padding-bottom:0
  }
}