/* «ارتباط»: the toolbar button, the badge on a linked element, and the link dialog. */
.element-link-btn.is-linked { color: #0290fe; }
.element-link-btn.is-linked::after { content: ''; position: absolute; top: 5px; inset-inline-end: 5px; width: 6px; height: 6px; border-radius: 50%; background: #0290fe; box-shadow: 0 0 0 2px #fff; }
.element-link-btn { position: relative; }

.element-link-badge { position: absolute; top: -9px; inset-inline-start: -9px; z-index: 6; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: #0290fe; color: #fff; box-shadow: 0 2px 6px #0b1d3a40, 0 0 0 2px #fff; pointer-events: none; }
.element-link-badge svg { width: 11px; height: 11px; stroke-width: 2.6; }
.element-wrapper:not(.selected):not(:hover) > .element-link-badge { opacity: .78; }

/* While presenting, a linked element looks clickable. */
.presentation-player.over-link, .presentation-player.over-link.controls-hidden { cursor: pointer; }

.el-link-dialog { width: min(460px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 20px; box-shadow: 0 30px 90px #0f1d4a55; color: #1d2a32; background: #fff; font-family: inherit; }
.el-link-dialog::backdrop { background: #0b1430a6; backdrop-filter: blur(3px); }
.el-link-dialog form { display: grid; gap: 14px; padding: 22px 22px 18px; }
.el-link-dialog header { display: flex; align-items: flex-start; gap: 12px; }
.el-link-dialog header > div { flex: 1; min-width: 0; }
.el-link-dialog h2 { margin: 2px 0 4px; font-size: 17px; font-weight: 800; }
.el-link-dialog header p { margin: 0; font-size: 12px; line-height: 1.7; color: #5b6c76; }
.el-link-icon { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(150deg, #0200fc, #0290fe 65%, #01cbfb); color: #fff; }
.el-link-icon svg { width: 20px; height: 20px; }
.el-link-x { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 9px; background: transparent; color: #6f7f89; cursor: pointer; }
.el-link-x:hover { background: #f1f4f7; }
.el-link-x svg { width: 17px; height: 17px; }

.el-link-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: #f1f4f7; }
.el-link-tabs button { height: 36px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 9px; background: transparent; color: #4b5c66; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.el-link-tabs button svg { width: 15px; height: 15px; }
.el-link-tabs button[aria-selected="true"] { background: #fff; color: #0200fc; box-shadow: 0 1px 4px #0b1d3a1f; }

.el-link-dialog section { display: grid; gap: 6px; }
.el-link-dialog section[hidden] { display: none; }
.el-link-dialog section > label { display: grid; gap: 6px; font-size: 12px; font-weight: 700; color: #4b5c66; }
.el-link-dialog input[name="url"] { height: 44px; padding: 0 12px; border: 1px solid #dfe5ea; border-radius: 11px; background: #fff; color: #1d2a32; font: inherit; font-size: 14px; text-align: left; outline: none; }
.el-link-dialog input[name="url"]:focus { border-color: #0290fe; box-shadow: 0 0 0 3px #0290fe26; }
.el-link-dialog section > small { font-size: 11px; color: #8b99a2; }

.el-link-drop { display: grid !important; justify-items: center; gap: 4px !important; padding: 20px 14px; border: 1.5px dashed #c8d3dc; border-radius: 14px; background: #fafcfd; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.el-link-drop:hover { border-color: #0290fe; background: #f4f9ff; }
.el-link-drop svg { width: 22px; height: 22px; color: #0290fe; margin-bottom: 2px; }
.el-link-drop b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: #1d2a32; }
.el-link-drop small { font-size: 11px; font-weight: 500; color: #6f7f89; }
.el-link-drop.is-ready { border-style: solid; border-color: #9fd0ff; background: #f2f8ff; }
.el-link-progress { height: 6px; border-radius: 6px; background: #eef2f5; overflow: hidden; }
.el-link-progress[hidden] { display: none; }
.el-link-progress i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #0200fc, #0290fe 60%, #01cbfb); transition: width .2s; }

.el-link-status { margin: -4px 0 0; min-height: 0; font-size: 12px; line-height: 1.6; color: #2f7d4f; }
.el-link-status:empty { display: none; }
.el-link-status.is-error { color: #c0392b; }

.el-link-dialog footer { display: flex; align-items: center; gap: 8px; padding-top: 4px; }
.el-link-dialog footer > span { flex: 1; }
.el-link-dialog .pz-cta { height: 40px; padding: 0 20px; border: 0; border-radius: 11px; background: #0290fe; color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.el-link-dialog .pz-cta:disabled { opacity: .55; cursor: wait; }
.el-link-dialog .pz-ghost { height: 40px; padding: 0 14px; border: 1px solid #dfe5ea; border-radius: 11px; background: #fff; color: #1d2a32; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.el-link-remove { height: 40px; display: flex; align-items: center; gap: 6px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: #c0392b; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.el-link-remove:hover { background: #fdf0ee; }
.el-link-remove svg { width: 15px; height: 15px; }

html[data-editor-theme="midnight"] .el-link-dialog { background: #121a26; color: #e8eef4; }
html[data-editor-theme="midnight"] .el-link-dialog header p, html[data-editor-theme="midnight"] .el-link-dialog section > label { color: #a9b6c2; }
html[data-editor-theme="midnight"] .el-link-tabs { background: #1b2533; }
html[data-editor-theme="midnight"] .el-link-tabs button { color: #a9b6c2; }
html[data-editor-theme="midnight"] .el-link-tabs button[aria-selected="true"] { background: #263246; color: #7cc4ff; }
html[data-editor-theme="midnight"] .el-link-dialog input[name="url"], html[data-editor-theme="midnight"] .el-link-dialog .pz-ghost { background: #1b2533; border-color: #2c394b; color: #e8eef4; }
html[data-editor-theme="midnight"] .el-link-drop { background: #172131; border-color: #34445a; }
html[data-editor-theme="midnight"] .el-link-drop b { color: #e8eef4; }