// #region Auto Insert

// Auto Insert Meta Box — group action icons (Select all / Clear)
//
// Markup assumed:
// .smart-content-sync-auto-insert__group-actions
//   .smart-content-sync-auto-insert__action--select-all
//   .smart-content-sync-auto-insert__action--clear

.smart-content-sync-auto-insert {
  .smart-content-sync-auto-insert__summary {
    /* We use flex for layout; that hides the browser's native <details> marker in many UIs */
    display: flex;
    // align-items: center;
    flex-direction: column;
    gap: 6px;
    // flex-wrap: wrap;

    /* Space for our custom caret */
    padding-left: 14px;
    position: relative;
    cursor: pointer;

    /* Hide native marker so our caret is the single source of truth */
    &::-webkit-details-marker {
      display: none;
    }

    /* Custom caret (right-pointing triangle) */
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 17%;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 5px 0 5px 6px;
      border-color: transparent transparent transparent currentColor;
      transform: translateY(-50%);
      opacity: 0.8;
    }
  }

  /* Rotate caret when group is open */
  .smart-content-sync-auto-insert__group[open] > .smart-content-sync-auto-insert__summary::before {
    transform: translateY(-50%) rotate(90deg);
  }

  .smart-content-sync-auto-insert__summary-title {
    flex: 0 0 auto;
  }

  .smart-content-sync-auto-insert__count {
    flex: 0 0 auto;
    opacity: 0.75;
    font-size: 12px;
    line-height: 1;
  }

  .smart-content-sync-auto-insert__group-actions {
    // margin-left: auto;
    display: none;
    align-items: center;
    gap: 16px;
    flex-basis: 100%;
    justify-content: flex-end;
  }
  .smart-content-sync-auto-insert__group[open] .smart-content-sync-auto-insert__group-actions{
    display: inline-flex;
  }

  .smart-content-sync-auto-insert__action {
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;

    background-color: currentColor; // used by mask
    opacity: 0.72;
    cursor: pointer;

    border-radius: 3px;

    // Make it feel clickable but not "button noisy"
    &:hover {
      opacity: 1;
    }

    &:focus,
    &:focus-visible {
      outline: 2px solid currentColor;
      outline-offset: 2px;
      opacity: 1;
    }

    &:active {
      transform: translateY(0.5px);
    }

    // Mask setup (standard + webkit)
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 18px 18px;

    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 18px 18px;
  }

  // Icon: Select all
  .smart-content-sync-auto-insert__action--select-all {
    // Font Awesome "list-check" style SVG from your snippet (encoded)
    // $selectAllSvg: "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20640%20640%22%3E%3Cpath%20d%3D%22M205.3%20120.9C210.2%20113.5%20208.2%20103.6%20200.9%2098.7C193.6%2093.8%20183.6%2095.8%20178.7%20103.1L125.5%20182.9L91.3%20148.7C85.1%20142.5%2074.9%20142.5%2068.7%20148.7C62.5%20154.9%2062.5%20165.1%2068.7%20171.3L116.7%20219.3C120.1%20222.7%20124.8%20224.4%20129.6%20223.9C134.4%20223.4%20138.7%20220.8%20141.3%20216.9L205.3%20120.9zM272%20144C263.2%20144%20256%20151.2%20256%20160C256%20168.8%20263.2%20176%20272%20176L560%20176C568.8%20176%20576%20168.8%20576%20160C576%20151.2%20568.8%20144%20560%20144L272%20144zM272%20304C263.2%20304%20256%20311.2%20256%20320C256%20328.8%20263.2%20336%20272%20336L560%20336C568.8%20336%20576%20328.8%20576%20320C576%20311.2%20568.8%20304%20560%20304L272%20304zM240%20464C231.2%20464%20224%20471.2%20224%20480C224%20488.8%20231.2%20496%20240%20496L560%20496C568.8%20496%20576%20488.8%20576%20480C576%20471.2%20568.8%20464%20560%20464L240%20464zM120%20456C106.7%20456%2096%20466.7%2096%20480C96%20493.3%20106.7%20504%20120%20504C133.3%20504%20144%20493.3%20144%20480C144%20466.7%20133.3%20456%20120%20456zM200.9%20258.7C193.5%20253.8%20183.6%20255.8%20178.7%20263.1L125.5%20342.9L91.3%20308.7C85.1%20302.5%2074.9%20302.5%2068.7%20308.7C62.5%20314.9%2062.5%20325.1%2068.7%20331.3L116.7%20379.3C120.1%20382.7%20124.8%20384.4%20129.6%20383.9C134.4%20383.4%20138.7%20380.8%20141.3%20376.9L205.3%20280.9C210.2%20273.5%20208.2%20263.6%20200.9%20258.7z%22/%3E%3C/svg%3E";
    $selectAllSvg: "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M205.3%20120.9C210.2%20113.5%20208.2%20103.6%20200.9%2098.7C193.6%2093.8%20183.6%2095.8%20178.7%20103.1L125.5%20182.9L91.3%20148.7C85.1%20142.5%2074.9%20142.5%2068.7%20148.7C62.5%20154.9%2062.5%20165.1%2068.7%20171.3L116.7%20219.3C120.1%20222.7%20124.8%20224.4%20129.6%20223.9C134.4%20223.4%20138.7%20220.8%20141.3%20216.9L205.3%20120.9zM272%20144C263.2%20144%20256%20151.2%20256%20160C256%20168.8%20263.2%20176%20272%20176L560%20176C568.8%20176%20576%20168.8%20576%20160C576%20151.2%20568.8%20144%20560%20144L272%20144zM272%20304C263.2%20304%20256%20311.2%20256%20320C256%20328.8%20263.2%20336%20272%20336L560%20336C568.8%20336%20576%20328.8%20576%20320C576%20311.2%20568.8%20304%20560%20304L272%20304zM240%20464C231.2%20464%20224%20471.2%20224%20480C224%20488.8%20231.2%20496%20240%20496L560%20496C568.8%20496%20576%20488.8%20576%20480C576%20471.2%20568.8%20464%20560%20464L240%20464zM120%20456C106.7%20456%2096%20466.7%2096%20480C96%20493.3%20106.7%20504%20120%20504C133.3%20504%20144%20493.3%20144%20480C144%20466.7%20133.3%20456%20120%20456zM200.9%20258.7C193.5%20253.8%20183.6%20255.8%20178.7%20263.1L125.5%20342.9L91.3%20308.7C85.1%20302.5%2074.9%20302.5%2068.7%20308.7C62.5%20314.9%2062.5%20325.1%2068.7%20331.3L116.7%20379.3C120.1%20382.7%20124.8%20384.4%20129.6%20383.9C134.4%20383.4%20138.7%20380.8%20141.3%20376.9L205.3%20280.9C210.2%20273.5%20208.2%20263.6%20200.9%20258.7z%22/%3E%3C/svg%3E";

    -webkit-mask-image: url(#{$selectAllSvg});
    mask-image: url(#{$selectAllSvg});
  }

  .smart-content-sync-auto-insert__action--select-all:hover {
    // change color on hover
    color: #2271b1;
  }

  // Icon: Clear
  .smart-content-sync-auto-insert__action--clear {
    // Font Awesome "square" style SVG from your snippet (encoded)
    // $clearSvg: "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20640%20640%22%3E%3Cpath%20d%3D%22M480%20128C497.7%20128%20512%20142.3%20512%20160L512%20480C512%20497.7%20497.7%20512%20480%20512L160%20512C142.3%20512%20128%20497.7%20128%20480L128%20160C128%20142.3%20142.3%20128%20160%20128L480%20128zM160%2096C124.7%2096%2096%20124.7%2096%20160L96%20480C96%20515.3%20124.7%20544%20160%20544L480%20544C515.3%20544%20544%20515.3%20544%20480L544%20160C544%20124.7%20515.3%2096%20480%2096L160%2096z%22/%3E%3C/svg%3E";
    $clearSvg: "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M480%20128C497.7%20128%20512%20142.3%20512%20160L512%20480C512%20497.7%20497.7%20512%20480%20512L160%20512C142.3%20512%20128%20497.7%20128%20480L128%20160C128%20142.3%20142.3%20128%20160%20128L480%20128zM160%2096C124.7%2096%2096%20124.7%2096%20160L96%20480C96%20515.3%20124.7%20544%20160%20544L480%20544C515.3%20544%20544%20515.3%20544%20480L544%20160C544%20124.7%20515.3%2096%20480%2096L160%2096z%22/%3E%3C/svg%3E";


    -webkit-mask-image: url(#{$clearSvg});
    mask-image: url(#{$clearSvg});
  }
}

// #endregion Auto Insert