.du-pane {

  

  --edge: 0.24cqw;
  --corner-w: 0.88cqw;
  --corner-h: 0.92cqw;

  position: relative;
  padding: var(--edge);
  background: url("/assets/textures/generic_dark-fe630479.jpg");
  box-shadow: inset 0 0 9.6cqw 1.08cqw rgba(0, 0, 0, 0.75);

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;

    background:
      url("/assets/landing/deco-box-horizontal-3ed75c1c.png") left top / auto var(--edge) repeat-x,
      url("/assets/landing/deco-box-horizontal-3ed75c1c.png") left bottom / auto var(--edge) repeat-x,
      url("/assets/landing/deco-box-vertical-db5a7e51.png") left top / var(--edge) auto repeat-y,
      url("/assets/landing/deco-box-vertical-db5a7e51.png") right top / var(--edge) auto repeat-y;
  }

  > .du-pane-content {
    position: relative;
    z-index: 2;
  }

  
  > .du-pane-corner {
    position: absolute;
    width: var(--corner-w);
    height: var(--corner-h);
    pointer-events: none;
    z-index: 3;

    background-image: url("/assets/landing/deco-box-corners-simpler-5cf53052.png");
    background-repeat: no-repeat;

    
    background-size: var(--corner-w) calc(var(--corner-h) * 2);
  }

  > .du-pane-corner-tl {
    top: 0;
    left: 0;
    background-position: 0 100%;
  }

  > .du-pane-corner-bl {
    bottom: 0;
    left: 0;
    background-position: 0 0;
  }

  > .du-pane-corner-tr {
    top: 0;
    right: 0;
    background-position: 0 100%;
    transform: scaleX(-1);
    transform-origin: center;
  }

  > .du-pane-corner-br {
    bottom: 0;
    right: 0;
    background-position: 0 0;
    transform: scaleX(-1);
    transform-origin: center;
  }

}


.du-buttons {

  --h: 3.75cqw;    

  --cap-w: calc(var(--h) * 0.86);
  --cap-offset: calc(var(--h) * 0.24);
  --pad-x: calc(var(--h) * 0.55);
  --font: calc(var(--h) * 0.29);

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--h);
  padding-inline: var(--cap-w);
  background: left center / auto 100% repeat-x url("/assets/ui/buttons/background-ee6f691d.png");
  background-origin: content-box;
  background-clip: content-box;

  &.du-size-xs {
    --h: 2cqw;
    --font: calc(var(--h) * 0.4);
  }

  &::before, &::after {
    content: '';
    position: absolute;
    inset-block: 0;
    width: var(--cap-w);
    z-index: 1;
    background: center / auto 100% no-repeat url("/assets/ui/buttons/background_edge-4d257b3a.png");
  }

  &::before {
    left: var(--cap-offset);
  }

  &::after {
    right: var(--cap-offset);
    transform: scaleX(-1);
    transform-origin: center;
  }

  > .du-button {

    --ih: calc(var(--h) * 0.66);    

    --cap-w: calc(var(--ih) * 1.4);
    --cap-offset-l: calc(var(--ih) * -0.34);
    --cap-offset-r: calc(var(--ih) * -0.29);
    --label-pad: calc(var(--ih) * 0.2);

    position: relative;
    height: var(--ih);
    display: inline-flex;
    align-items: center;
    z-index: 2;

    background: left center / auto 100% repeat-x url("/assets/ui/buttons/base-244f9d88.png");
    background-origin: content-box;
    background-clip: content-box;

    font: bold var(--font) / 1.1 var(--almendra);

    &.du-green {
      filter: brightness(130%) contrast(130%) hue-rotate(40deg) saturate(350%);
      &:hover {
        filter: brightness(150%) contrast(130%) hue-rotate(40deg) saturate(350%);
      }
    }

    &::before,
    &::after {
      content: '';
      position: absolute;
      inset-block: 0;
      width: calc(var(--cap-w) / 2);
      background-image: url("/assets/ui/buttons/base_edges_hex-4d94bfd9.png");
      background-repeat: no-repeat;
      background-size: 200% 100%;   
    }

    &::before {
      left: var(--cap-offset-l);
      background-position: left center;
    }

    &::after {
      right: var(--cap-offset-r);
      background-position: right center;
    }

    
    > .du-button-label {
      z-index: 2;
      white-space: nowrap;
      padding: var(--label-pad);
      color: #4d4625;
      text-decoration: none;
      text-shadow: #352f15 -0.06cqw -0.06cqw 0;
    }

  }

}