/* === 共通ベース === */
.cbg-btn-wrap { text-align: center; width: 100%; margin: 25px 0; perspective: 1000px; }
.cbg-btn-inner { position: relative; display: inline-block; max-width: 100%; }

.cbg-btn {
    display: inline-flex; align-items: center; justify-content: center; position: relative;
    text-decoration: none; border-radius: var(--cbg-radius); font-weight: bold; line-height: 1.5;
    transition: all 0.3s ease; box-sizing: border-box; z-index: 1;
    background: var(--cbg-bg-value); color: var(--cbg-text); border: none;
    padding: var(--cbg-pad-tb) var(--cbg-pad-lr); font-size: 16px; width: 100%;
}
.cbg-btn:hover { background: var(--cbg-hover-bg-value); color: var(--cbg-text-hover); }

.cbg-text { z-index: 2; position: relative; transition: all 0.3s ease; pointer-events: none; display: flex; align-items: center; gap: 8px; }
.cbg-icon { font-family: "dashicons"; font-size: 1.2em; line-height: 1; vertical-align: middle; }
.cbg-draw-lines { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }

/* === 吹き出し（マイクロコピー）共通化 === */
.cbg-has-microcopy { margin-top: 35px !important; overflow: visible !important; }
.cbg-has-microcopy::before {
    content: attr(data-microcopy); position: absolute; top: -38px; left: 50%; transform: translateX(-50%);
    background: var(--cbg-micro-bg); color: var(--cbg-micro-text); padding: 4px 12px; font-size: 12px; border-radius: 4px; white-space: nowrap; 
    /* ここがキモ！影の表示・非表示を制御できるように変更 */
    box-shadow: var(--cbg-micro-shadow, none); 
    pointer-events: none; z-index: 10; font-weight: bold;
}
.cbg-has-microcopy::after {
    content: ""; position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    border: 6px solid transparent; border-top-color: var(--cbg-micro-bg); pointer-events: none; z-index: 10;
}

/* === エフェクト一覧 (全40種) === */
.cbg-tmpl-solid:hover { opacity: 0.8; }
.cbg-tmpl-3d { box-shadow: 0 6px 0 rgba(0,0,0,0.25); transform: translateY(0); } .cbg-tmpl-3d:hover { box-shadow: 0 2px 0 rgba(0,0,0,0.25); transform: translateY(4px); }
.cbg-tmpl-ghost { background: transparent !important; border: 2px solid var(--cbg-base-color); color: var(--cbg-base-color); } .cbg-tmpl-ghost:hover { background: var(--cbg-hover-bg-value) !important; color: var(--cbg-text-hover) !important; border-color: transparent; }
.cbg-tmpl-shine { overflow: hidden; } .cbg-tmpl-shine::before { content: ""; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%); transform: skewX(-25deg); z-index: 1; pointer-events: none; } .cbg-tmpl-shine:hover::before { animation: cbgShine 0.7s; } @keyframes cbgShine { 100% { left: 125%; } }
.cbg-tmpl-dub-shadow { box-shadow: 5px 5px 0 rgba(0,0,0,0.25); border: 1px solid rgba(0,0,0,0.25); } .cbg-tmpl-dub-shadow:hover { box-shadow: 0 0 0 transparent; transform: translate(5px, 5px); }
.cbg-tmpl-dub-line { background: transparent !important; border-radius: 0 !important; color: var(--cbg-text); } .cbg-tmpl-dub-line::after { content: ""; position: absolute; bottom: 0; left: 0; width: 0%; height: 3px; background: var(--cbg-base-color); transition: 0.3s; pointer-events: none; } .cbg-tmpl-dub-line:hover { background: var(--cbg-hover-bg-value) !important; color: var(--cbg-text-hover); } .cbg-tmpl-dub-line:hover::after { width: 100%; }
.cbg-tmpl-dub-arrow { padding-right: 45px; } .cbg-tmpl-dub-arrow::after { content: ""; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg) translateY(-50%); position: absolute; top: 50%; right: 25px; transition: 0.3s; pointer-events: none; } .cbg-tmpl-dub-arrow:hover::after { right: 18px; }
.cbg-tmpl-ripple { overflow: hidden; } .cbg-tmpl-ripple::after { content: ""; position: absolute; top: 50%; left: 50%; width: 100%; height: 0; padding-bottom: 100%; background: rgba(255,255,255,0.4); border-radius: 50%; transform: translate(-50%, -50%) scale(0); opacity: 1; transition: 0s; z-index: 1; pointer-events: none; } .cbg-tmpl-ripple:hover::after { transform: translate(-50%, -50%) scale(2.5); opacity: 0; transition: transform 0.6s ease-out, opacity 0.6s ease-out; }
.cbg-tmpl-float { box-shadow: 0 4px 8px rgba(0,0,0,0.1); } .cbg-tmpl-float:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); }
.cbg-tmpl-fill-right { background: transparent !important; color: var(--cbg-base-color); border: 2px solid var(--cbg-base-color); overflow: hidden; } .cbg-tmpl-fill-right::before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%; background: var(--cbg-hover-bg-value); transition: all 0.3s ease; z-index: -1; pointer-events: none; } .cbg-tmpl-fill-right:hover { color: var(--cbg-text-hover); border-color: transparent; } .cbg-tmpl-fill-right:hover::before { width: 100%; }
.cbg-tmpl-fill-center { background: transparent !important; color: var(--cbg-base-color); border: 2px solid var(--cbg-base-color); overflow: hidden; } .cbg-tmpl-fill-center::before { content: ""; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: var(--cbg-hover-bg-value); transition: all 0.4s ease; z-index: -1; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; } .cbg-tmpl-fill-center:hover { color: var(--cbg-text-hover); border-color: transparent; } .cbg-tmpl-fill-center:hover::before { width: 300px; height: 300px; }
.cbg-tmpl-stripe { overflow: hidden; } .cbg-tmpl-stripe::before { content: ""; position: absolute; top: 0; left: 0; width: 200%; height: 100%; background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,0.15), rgba(255,255,255,0.15) 15px, transparent 15px, transparent 30px); background-size: 42px 42px; z-index: 1; pointer-events: none; } .cbg-tmpl-stripe:hover::before { animation: cbgStripeMove 1s linear infinite; } @keyframes cbgStripeMove { 0% { transform: translateX(0); } 100% { transform: translateX(-42px); } }
.cbg-tmpl-arrow-move::after { content: "\2192"; margin-left: 10px; transition: transform 0.3s; } .cbg-tmpl-arrow-move:hover::after { transform: translateX(5px); }
.cbg-tmpl-jelly:hover { animation: cbgJelly 0.6s; } @keyframes cbgJelly { 0%, 100% { transform: scale(1, 1); } 25% { transform: scale(0.9, 1.1); } 50% { transform: scale(1.1, 0.9); } 75% { transform: scale(0.95, 1.05); } }
.cbg-tmpl-pulse:hover { animation: cbgPulse 1s infinite; } @keyframes cbgPulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0,0,0,0.2); } 70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(0,0,0,0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0,0,0,0); } }
.cbg-tmpl-glow:hover { box-shadow: 0 0 15px var(--cbg-hover-bg-color), 0 0 30px var(--cbg-hover-bg-color); }
.cbg-tmpl-skew { overflow: hidden; } .cbg-tmpl-skew::after { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: rgba(255,255,255,0.2); transform: skewX(-20deg); transition: all 0.5s ease; z-index: 1; pointer-events: none; } .cbg-tmpl-skew:hover::after { left: 100%; }
.cbg-tmpl-border-draw { background: transparent !important; color: var(--cbg-base-color); border: 1px solid transparent; border-radius: 0 !important; } .cbg-tmpl-border-draw::before, .cbg-tmpl-border-draw::after { content: ""; position: absolute; width: 0; height: 0; border: 2px solid transparent; box-sizing: border-box; pointer-events: none; } .cbg-tmpl-border-draw::before { top: 0; left: 0; } .cbg-tmpl-border-draw::after { bottom: 0; right: 0; } .cbg-tmpl-border-draw:hover::before { width: 100%; height: 100%; border-top-color: var(--cbg-base-color); border-right-color: var(--cbg-base-color); transition: width 0.2s, height 0.2s 0.2s; } .cbg-tmpl-border-draw:hover::after { width: 100%; height: 100%; border-bottom-color: var(--cbg-base-color); border-left-color: var(--cbg-base-color); transition: width 0.2s 0.4s, height 0.2s 0.6s; }
.cbg-tmpl-flip { transform-style: preserve-3d; } .cbg-tmpl-flip:hover { transform: rotateX(360deg); }
.cbg-tmpl-push-down:active { transform: scale(0.95); opacity: 0.9; }
.cbg-tmpl-webref-diagonal { background: transparent !important; color: var(--cbg-base-color); border: 2px solid var(--cbg-base-color); overflow: hidden; } .cbg-tmpl-webref-diagonal::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--cbg-hover-bg-value); transform: skewX(-15deg); transition: all 0.4s ease; z-index: -1; pointer-events: none; } .cbg-tmpl-webref-diagonal:hover { color: var(--cbg-text-hover); border-color: transparent; } .cbg-tmpl-webref-diagonal:hover::before { left: 0; transform: skewX(0deg); }
.cbg-tmpl-webref-neon { background: transparent !important; color: var(--cbg-base-color); border: 2px solid var(--cbg-base-color); box-shadow: inset 0 0 10px rgba(0,0,0,0.1); } .cbg-tmpl-webref-neon:hover { background: var(--cbg-hover-bg-value) !important; color: var(--cbg-text-hover); border: 2px solid var(--cbg-hover-bg-color); box-shadow: 0 0 20px var(--cbg-hover-bg-color), inset 0 0 10px rgba(255,255,255,0.5); text-shadow: 0 0 5px #fff; }
.cbg-tmpl-webref-shutter { background: transparent !important; color: var(--cbg-base-color); border: 2px solid var(--cbg-base-color); overflow: hidden; } .cbg-tmpl-webref-shutter::before, .cbg-tmpl-webref-shutter::after { content: ""; position: absolute; left: 0; width: 100%; height: 50%; background: var(--cbg-hover-bg-value); transition: all 0.3s ease; z-index: -1; pointer-events: none; } .cbg-tmpl-webref-shutter::before { top: -50%; } .cbg-tmpl-webref-shutter::after { bottom: -50%; } .cbg-tmpl-webref-shutter:hover { color: var(--cbg-text-hover); border-color: transparent; } .cbg-tmpl-webref-shutter:hover::before { top: 0; } .cbg-tmpl-webref-shutter:hover::after { bottom: 0; }
.cbg-tmpl-webref-grad-move { background-size: 200% auto !important; transition: background-position 0.5s ease; border: none; } .cbg-tmpl-webref-grad-move:hover { background: var(--cbg-bg-value) !important; background-size: 200% auto !important; background-position: right center !important; color: var(--cbg-text-hover); }
.cbg-tmpl-webref-water { background: transparent !important; color: var(--cbg-base-color); border: 2px solid var(--cbg-base-color); overflow: hidden; } .cbg-tmpl-webref-water::before { content: ""; position: absolute; top: 100%; left: -25%; width: 150%; height: 200%; background: var(--cbg-hover-bg-value); border-radius: 40%; transition: all 0.5s ease; z-index: -1; pointer-events: none; } .cbg-tmpl-webref-water:hover::before { top: -20%; animation: cbgWave 2.5s linear infinite; } .cbg-tmpl-webref-water:hover { color: var(--cbg-text-hover); border-color: transparent; } @keyframes cbgWave { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.cbg-tmpl-webref-spin { background: transparent !important; color: var(--cbg-text); overflow: hidden; border: 2px solid transparent; } .cbg-tmpl-webref-spin::before { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient(transparent, var(--cbg-hover-bg-color), transparent 30%); z-index: -2; opacity: 0; transition: opacity 0.3s; pointer-events: none; } .cbg-tmpl-webref-spin::after { content: ""; position: absolute; top: 2px; left: 2px; right: 2px; bottom: 2px; background: var(--cbg-bg-value); border-radius: calc(var(--cbg-radius) - 2px); z-index: -1; pointer-events: none; } .cbg-tmpl-webref-spin:hover::before { opacity: 1; animation: cbgSpin 1.5s linear infinite; } .cbg-tmpl-webref-spin:hover { color: var(--cbg-text-hover); } @keyframes cbgSpin { 100% { transform: rotate(360deg); } }
.cbg-tmpl-webref-corners { background: transparent !important; color: var(--cbg-base-color); border: 1px solid transparent; border-radius: 0 !important; } .cbg-tmpl-webref-corners::before, .cbg-tmpl-webref-corners::after { content: ""; position: absolute; width: 15px; height: 15px; border: 2px solid var(--cbg-base-color); transition: all 0.3s ease; box-sizing: border-box; border-radius: 2px; pointer-events: none; } .cbg-tmpl-webref-corners::before { top: 0; left: 0; border-right: none; border-bottom: none; } .cbg-tmpl-webref-corners::after { bottom: 0; right: 0; border-left: none; border-top: none; } .cbg-tmpl-webref-corners:hover::before, .cbg-tmpl-webref-corners:hover::after { width: 100%; height: 100%; } .cbg-tmpl-webref-corners:hover { background: var(--cbg-hover-bg-value) !important; color: var(--cbg-text-hover); border-color: transparent; }
.cbg-tmpl-webref-elegant { background: transparent !important; color: var(--cbg-base-color); border: 1px solid var(--cbg-base-color); letter-spacing: 0px; } .cbg-tmpl-webref-elegant:hover { background: var(--cbg-hover-bg-value) !important; color: var(--cbg-text-hover); border-color: transparent; } .cbg-tmpl-webref-elegant:hover .cbg-text { letter-spacing: 4px; padding-left: 4px; }
.cbg-tmpl-webref-double { background: transparent !important; color: var(--cbg-base-color); border: 2px solid var(--cbg-base-color); overflow: hidden; } .cbg-tmpl-webref-double::before, .cbg-tmpl-webref-double::after { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; transition: all 0.4s ease; z-index: -1; pointer-events: none; } .cbg-tmpl-webref-double::before { background: var(--cbg-base-color); } .cbg-tmpl-webref-double::after { background: var(--cbg-hover-bg-value); transition-delay: 0.1s; } .cbg-tmpl-webref-double:hover::before, .cbg-tmpl-webref-double:hover::after { left: 0; } .cbg-tmpl-webref-double:hover { color: var(--cbg-text-hover); border-color: transparent; }
.cbg-tmpl-webref-fluid { background: transparent !important; border: 2px solid var(--cbg-base-color); color: var(--cbg-base-color); overflow: hidden; } .cbg-tmpl-webref-fluid::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--cbg-hover-bg-value); border-radius: var(--cbg-radius); z-index: -1; transform: scaleX(0); transition: transform 0.4s cubic-bezier(0.65, 0, 0.076, 1); transform-origin: right; pointer-events: none; } .cbg-tmpl-webref-fluid:hover::before { transform: scaleX(1); transform-origin: left; } .cbg-tmpl-webref-fluid:hover { color: var(--cbg-text-hover); border-color: transparent; }
.cbg-tmpl-webref-glitch { background: var(--cbg-base-color); color: var(--cbg-text); } .cbg-tmpl-webref-glitch:hover { animation: cbgGlitch 0.2s linear both infinite; background: var(--cbg-hover-bg-value); color: var(--cbg-text-hover); } @keyframes cbgGlitch { 0% { transform: translate(0); box-shadow: -3px 0 0 rgba(255,0,0,0.7), 3px 0 0 rgba(0,255,255,0.7); } 20% { transform: translate(-3px, 2px); box-shadow: 3px 0 0 rgba(255,0,0,0.7), -3px 0 0 rgba(0,255,255,0.7); } 40% { transform: translate(3px, -2px); box-shadow: -3px 0 0 rgba(255,0,0,0.7), 3px 0 0 rgba(0,255,255,0.7); } 60% { transform: translate(-3px, -2px); box-shadow: 3px 0 0 rgba(255,0,0,0.7), -3px 0 0 rgba(0,255,255,0.7); } 80% { transform: translate(3px, 2px); box-shadow: -3px 0 0 rgba(255,0,0,0.7), 3px 0 0 rgba(0,255,255,0.7); } 100% { transform: translate(0); box-shadow: 0 0 0 transparent; } }
.cbg-tmpl-webref-shadow-pop { background: var(--cbg-bg-value); color: var(--cbg-text); border: 2px solid var(--cbg-base-color); box-shadow: 0 0 0 var(--cbg-base-color); transform: translate(0, 0); border-radius: 0 !important; } .cbg-tmpl-webref-shadow-pop:hover { background: var(--cbg-hover-bg-value); color: var(--cbg-text-hover); transform: translate(-4px, -4px); box-shadow: 6px 6px 0 var(--cbg-base-color); }

/* ボーダードロー系 8種 */
.cbg-draw-base { background: transparent !important; color: var(--cbg-base-color); overflow: hidden; border-radius: 0 !important; }
.cbg-draw-base::before, .cbg-draw-base::after, .cbg-draw-base .cbg-draw-lines::before, .cbg-draw-base .cbg-draw-lines::after { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 0; background-color: var(--cbg-base-color); transition: 0.3s ease-in-out; z-index: 1; pointer-events: none; }
.cbg-draw-base:hover { color: var(--cbg-text-hover); background: var(--cbg-hover-bg-value) !important; transition-delay: 0.3s; }
.cbg-draw-base.cbg-tmpl-draw-cw::after, .cbg-draw-base.cbg-tmpl-draw-ccw::after, .cbg-draw-base.cbg-tmpl-draw-cw-tlbr::after, .cbg-draw-base.cbg-tmpl-draw-ccw-tlbr::after, .cbg-draw-base.cbg-tmpl-draw-cw-trbl::after, .cbg-draw-base.cbg-tmpl-draw-ccw-trbl::after { top: auto; right: 0; bottom: 0; left: auto; }
.cbg-draw-base.cbg-tmpl-draw-cw .cbg-draw-lines::before, .cbg-draw-base.cbg-tmpl-draw-ccw .cbg-draw-lines::before, .cbg-draw-base.cbg-tmpl-draw-cw-tlbr .cbg-draw-lines::before, .cbg-draw-base.cbg-tmpl-draw-ccw-tlbr .cbg-draw-lines::before, .cbg-draw-base.cbg-tmpl-draw-cw-trbl .cbg-draw-lines::before, .cbg-draw-base.cbg-tmpl-draw-ccw-trbl .cbg-draw-lines::before { right: 0; left: auto; }
.cbg-draw-base.cbg-tmpl-draw-cw .cbg-draw-lines::after, .cbg-draw-base.cbg-tmpl-draw-ccw .cbg-draw-lines::after, .cbg-draw-base.cbg-tmpl-draw-cw-tlbr .cbg-draw-lines::after, .cbg-draw-base.cbg-tmpl-draw-ccw-tlbr .cbg-draw-lines::after, .cbg-draw-base.cbg-tmpl-draw-cw-trbl .cbg-draw-lines::after, .cbg-draw-base.cbg-tmpl-draw-ccw-trbl .cbg-draw-lines::after { top: auto; bottom: 0; }

.cbg-tmpl-draw-cw::before, .cbg-tmpl-draw-cw::after { width: 0; height: 2px; } .cbg-tmpl-draw-cw .cbg-draw-lines::before, .cbg-tmpl-draw-cw .cbg-draw-lines::after { width: 2px; height: 0; } .cbg-tmpl-draw-cw:hover::before, .cbg-tmpl-draw-cw:hover::after { width: 100%; } .cbg-tmpl-draw-cw:hover .cbg-draw-lines::before, .cbg-tmpl-draw-cw:hover .cbg-draw-lines::after { height: 100%; }
.cbg-tmpl-draw-ccw::before, .cbg-tmpl-draw-ccw::after { width: 2px; height: 0; } .cbg-tmpl-draw-ccw .cbg-draw-lines::before, .cbg-tmpl-draw-ccw .cbg-draw-lines::after { width: 0; height: 2px; } .cbg-tmpl-draw-ccw:hover::before, .cbg-tmpl-draw-ccw:hover::after { height: 100%; } .cbg-tmpl-draw-ccw:hover .cbg-draw-lines::before, .cbg-tmpl-draw-ccw:hover .cbg-draw-lines::after { width: 100%; }
.cbg-tmpl-draw-tlbr::before, .cbg-tmpl-draw-tlbr::after { width: 0; height: 2px; } .cbg-tmpl-draw-tlbr::after, .cbg-tmpl-draw-tlbr .cbg-draw-lines::after { top: auto; right: 0; bottom: 0; left: auto; } .cbg-tmpl-draw-tlbr .cbg-draw-lines::before, .cbg-tmpl-draw-tlbr .cbg-draw-lines::after { width: 2px; height: 0; } .cbg-tmpl-draw-tlbr:hover::before, .cbg-tmpl-draw-tlbr:hover::after { width: 100%; } .cbg-tmpl-draw-tlbr:hover .cbg-draw-lines::before, .cbg-tmpl-draw-tlbr:hover .cbg-draw-lines::after { height: 100%; }
.cbg-tmpl-draw-trbl::before, .cbg-tmpl-draw-trbl::after { width: 0; height: 2px; } .cbg-tmpl-draw-trbl::before, .cbg-tmpl-draw-trbl .cbg-draw-lines::before { right: 0; left: auto; } .cbg-tmpl-draw-trbl::after, .cbg-tmpl-draw-trbl .cbg-draw-lines::after { top: auto; bottom: 0; } .cbg-tmpl-draw-trbl .cbg-draw-lines::before, .cbg-tmpl-draw-trbl .cbg-draw-lines::after { width: 2px; height: 0; } .cbg-tmpl-draw-trbl:hover::before, .cbg-tmpl-draw-trbl:hover::after { width: 100%; } .cbg-tmpl-draw-trbl:hover .cbg-draw-lines::before, .cbg-tmpl-draw-trbl:hover .cbg-draw-lines::after { height: 100%; }

.cbg-draw-base.cbg-tmpl-draw-cw-tlbr::before, .cbg-draw-base.cbg-tmpl-draw-cw-tlbr::after, .cbg-draw-base.cbg-tmpl-draw-cw-tlbr .cbg-draw-lines::before, .cbg-draw-base.cbg-tmpl-draw-cw-tlbr .cbg-draw-lines::after, .cbg-draw-base.cbg-tmpl-draw-ccw-tlbr::before, .cbg-draw-base.cbg-tmpl-draw-ccw-tlbr::after, .cbg-draw-base.cbg-tmpl-draw-ccw-tlbr .cbg-draw-lines::before, .cbg-draw-base.cbg-tmpl-draw-ccw-tlbr .cbg-draw-lines::after, .cbg-draw-base.cbg-tmpl-draw-cw-trbl::before, .cbg-draw-base.cbg-tmpl-draw-cw-trbl::after, .cbg-draw-base.cbg-tmpl-draw-cw-trbl .cbg-draw-lines::before, .cbg-draw-base.cbg-tmpl-draw-cw-trbl .cbg-draw-lines::after, .cbg-draw-base.cbg-tmpl-draw-ccw-trbl::before, .cbg-draw-base.cbg-tmpl-draw-ccw-trbl::after, .cbg-draw-base.cbg-tmpl-draw-ccw-trbl .cbg-draw-lines::before, .cbg-draw-base.cbg-tmpl-draw-ccw-trbl .cbg-draw-lines::after { transition: 0.15s ease-in-out; }
.cbg-tmpl-draw-cw-tlbr::before, .cbg-tmpl-draw-cw-tlbr::after { width: 0; height: 2px; transition-delay: 0.15s; } .cbg-tmpl-draw-cw-tlbr .cbg-draw-lines::before, .cbg-tmpl-draw-cw-tlbr .cbg-draw-lines::after { width: 2px; height: 0; transition-delay: 0s; } .cbg-tmpl-draw-cw-tlbr:hover::before, .cbg-tmpl-draw-cw-tlbr:hover::after { width: 100%; transition-delay: 0s; } .cbg-tmpl-draw-cw-tlbr:hover .cbg-draw-lines::before, .cbg-tmpl-draw-cw-tlbr:hover .cbg-draw-lines::after { height: 100%; transition-delay: 0.15s; }
.cbg-tmpl-draw-ccw-tlbr::before, .cbg-tmpl-draw-ccw-tlbr::after { width: 2px; height: 0; transition-delay: 0.15s; } .cbg-tmpl-draw-ccw-tlbr .cbg-draw-lines::before, .cbg-tmpl-draw-ccw-tlbr .cbg-draw-lines::after { width: 0; height: 2px; transition-delay: 0s; } .cbg-tmpl-draw-ccw-tlbr:hover::before, .cbg-tmpl-draw-ccw-tlbr:hover::after { height: 100%; transition-delay: 0s; } .cbg-tmpl-draw-ccw-tlbr:hover .cbg-draw-lines::before, .cbg-tmpl-draw-ccw-tlbr:hover .cbg-draw-lines::after { width: 100%; transition-delay: 0.15s; }
.cbg-tmpl-draw-cw-trbl::before, .cbg-tmpl-draw-cw-trbl::after { width: 0; height: 2px; transition-delay: 0s; } .cbg-tmpl-draw-cw-trbl .cbg-draw-lines::before, .cbg-tmpl-draw-cw-trbl .cbg-draw-lines::after { width: 2px; height: 0; transition-delay: 0.15s; } .cbg-tmpl-draw-cw-trbl:hover::before, .cbg-tmpl-draw-cw-trbl:hover::after { width: 100%; transition-delay: 0.15s; } .cbg-tmpl-draw-cw-trbl:hover .cbg-draw-lines::before, .cbg-tmpl-draw-cw-trbl:hover .cbg-draw-lines::after { height: 100%; transition-delay: 0s; }
.cbg-tmpl-draw-ccw-trbl::before, .cbg-tmpl-draw-ccw-trbl::after { width: 2px; height: 0; transition-delay: 0s; } .cbg-tmpl-draw-ccw-trbl .cbg-draw-lines::before, .cbg-tmpl-draw-ccw-trbl .cbg-draw-lines::after { width: 0; height: 2px; transition-delay: 0.15s; } .cbg-tmpl-draw-ccw-trbl:hover::before, .cbg-tmpl-draw-ccw-trbl:hover::after { height: 100%; transition-delay: 0.15s; } .cbg-tmpl-draw-ccw-trbl:hover .cbg-draw-lines::before, .cbg-tmpl-draw-ccw-trbl:hover .cbg-draw-lines::after { width: 100%; transition-delay: 0s; }