<div class="not-supported"> Your browser doesn't support this demo. It is only supported in Chrome 125+</div>

<div class="showcase">
  <main>
    <div class="anchor">anchor</div>
    <div class="target">target</div>
    <div class="insetModifiedContainingBlock"></div>
  </main>

  <form class="showInsetModifiedContainingBlockForm">
    <input type="checkbox" checked id="showInsetModifiedContainingBlockInput" name="showInsetModifiedContainingBlock" />
    <label for="showInsetModifiedContainingBlockInput">Show inset-modified containing block</label>
  </form>

</div>

<form class="stylesForm">
  <header>
    <h2>Edit Styles</h2>
  </header>
  <div class="targetStyle">
    <span class="className">.target {</span>

    <div class="property">
      <span class="propertyName">position-area: </span>
      <input class="styleInput" type="text" id="positionAreaInput" value="top right" placeholder="styles here..." />
    </div>

    <div class="property">
      <span class="propertyName">position-try-fallbacks: </span>
      <input class="styleInput" type="text" id="positionTryFallbacksInput" value="flip-inline, flip-block" placeholder="styles here..." />
    </div>

    <div class="property">
      <span class="propertyName">position-try-order: </span>
      <input class="styleInput" type="text" id="positionTryOrderInput" value="most-width" placeholder="styles here..." />
    </div>

    <span>}</span>
  </div>
  <button type="submit">Apply Styles</button>
</form>

.anchor {
  anchor-name: --my-anchor;
}

.target,
.insetModifiedContainingBlock {
  position: absolute;
  position-anchor: --my-anchor;

  position-area: top right;
  position-try-fallbacks: flip-inline, flip-block;
  position-try-order: most-width;
}

.insetModifiedContainingBlock {
  height: 100%;
  width: 100%;
}

/* Aesthetic Changes */

:root {
  --anchor-size: clamp(40px, 15vh, 80px);
}

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body {
  display: flex;
  flex-flow: row-reverse wrap;
  justify-content: center;
  align-items: center;

  gap: 40px;

  padding: 20px;

  min-height: 100vh;

  font-family: monospace;
}

.showcase {
  display: flex;
  flex-flow: column;
  gap: 10px;
}

main {
  display: flex;
  align-items: start;
  justify-content: start;
  padding: calc(var(--anchor-size) * 2) 0px 0px calc(var(--anchor-size) * 2);

  border: 2px solid black;
  border-radius: 10px;

  height: calc(var(--anchor-size) * 5);
  aspect-ratio: 1;

  position: relative;
  resize: both;
  overflow: hidden;
}

.showInsetModifiedContainingBlockForm {
  display: flex;
  align-items: center;
  gap: 5px;
}

input[type="checkbox"] {
  height: 15px;
  aspect-ratio: 1;
}

.anchor {
  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;

  width: var(--anchor-size);
  aspect-ratio: 1;

  background-color: #ffbd59;
}

.target {
  display: flex;
  align-items: center;
  justify-content: center;

  width: var(--anchor-size);
  aspect-ratio: 1;

  border-radius: 10px;

  background-color: #cb6ce6;
}

.insetModifiedContainingBlock {
  z-index: -1;
  border-radius: 10px;

  background-color: #0002;
}

.insetModifiedContainingBlock.hide {
  background-color: transparent;
}

header {
  display: flex;
  justify-content: space-between;
  aling-items: center;
}

.stylesForm {
  display: flex;
  flex-flow: column;
  gap: 10px;

  width: clamp(200px, 40vw, 400px);
}

.stylesForm input[type="text"] {
  all: unset;

  flex: 1 1 0;

  border: 1px solid grey;
  border-radius: 5px;
  padding: 5px;
}

.stylesForm button {
  all: unset;

  display: inline-block;

  border-radius: 4px;
  padding: 0 16px;

  height: 36px;
  min-width: 64px;

  cursor: pointer;
  font-weight: 500;

  line-height: 1.15;
  word-spacing: 0px;
  font-size: 14px;
  text-transform: uppercase;
  text-align: center;

  color: #000;
  background: #ffbd59;
  box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%),
    0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);

  &:hover {
    box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%),
      0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
  }
}

.targetStyle {
  display: flex;
  flex-flow: column;
  gap: 10px;

  width: 100%;

  padding: 15px;
  border-radius: 10px;

  font-weight: 600;

  background-color: #1d1e23;
  color: #fff;
}

.className {
  color: #d3c47a;
}

.property {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 10px;
}

.propertyName {
  color: #887573;
}

.toggleDirection {
  anchor-name: --toggle-direction;
}

.toggleDirection:hover + .toggleDirectionTooltip {
  pointer-events: initial;
  visibility: visible;
  opacity: 1;
}

.toggleDirectionTooltip {
  pointer-events: none;
  visibility: none;
  opacity: 0;

  position: absolute;
  position-anchor: --toggle-direction;
  inset-area: top;

  padding: 10px;
  border-radius: 10px;
  margin-bottom: 10px;

  font-size: 10px;

  background-color: #1d1e23d0;
  color: #fff;
  transition: all 50ms ease-in;
}

.not-supported {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100vw;
  height: 40px;

  font-weight: 600;

  background-color: #ffbd59aa;
}

@supports (position-try-options: flip-inline, flip-block) {
  .target,
  .insetModifiedContainingBlock {
    position-try-options: flip-inline, flip-block;
  }
}

@supports (inset-area: top right) {
  .target,
  .insetModifiedContainingBlock {
    inset-area: top right;
  }
}

@supports (position-area: top right) or (inset-area: top right) {
  .not-supported {
    display: none;
  }
}

// Apply styles from form

function applyStyles(event) {
  event.preventDefault();

  const positionAreaInput = document.querySelector("#positionAreaInput").value;
  const positionTryFallbacksInput = document.querySelector(
    "#positionTryFallbacksInput"
  ).value;
  const positionTryOrderInput = document.querySelector("#positionTryOrderInput")
    .value;

  const target = document.querySelector(".target");
  const insetModifiedContainingBlock = document.querySelector(
    ".insetModifiedContainingBlock"
  );

  // Create a new style element
  const styleElement = document.createElement("style");
  styleElement.textContent = `
  .target, .insetModifiedContainingBlock { 
      position-area: ${positionAreaInput};  
      inset-area: ${positionAreaInput};
      position-try: ${positionTryOrderInput} ${positionTryFallbacksInput};
    }`;

  // Remove any previous style elements for the .target class
  document.querySelectorAll("style[data-target]").forEach((el) => el.remove());

  // Append the new style element
  styleElement.setAttribute("data-target", "true");
  document.head.appendChild(styleElement);
}

const stylesForm = document.querySelector(".stylesForm");
stylesForm.addEventListener("submit", (event) => applyStyles(event));

// Show inset-modified contaning block

const showInsetModifiedContainingBlockInput = document.querySelector(
  "#showInsetModifiedContainingBlockInput"
);

function showInsetModifiedContainingBlock() {
  const insetModifiedContainingBlock = document.querySelector(
    ".insetModifiedContainingBlock"
  );

  insetModifiedContainingBlock.classList.toggle("hide");
}

showInsetModifiedContainingBlockInput.addEventListener(
  "change",
  showInsetModifiedContainingBlock
);