/* Don't add "all: revert" to variables elements, because it breaks contenteditable="false" */

.s-content-var {
    display: inline-flex;
    align-items: stretch;
    text-align: center;
    vertical-align: middle;
    border-radius: 4px;
    overflow: hidden;
    margin: 0 2px 0 1px;
    max-width: 100%;
}

/* Set default view styles, which overrides styles in the editor that user can add */
.s-content-var,
.s-content-var .s-content-var__value,
.s-content-var .s-content-var__fallback {
    color: #212121;
    font-size: 13px;
    font-weight: 400;
    font-style: normal;
    font-family: "Roboto", "Arial", "Helvetica", sans-serif;
    line-height: 1;
    text-decoration: none;
}

.s-content-var .s-content-var__value,
.s-content-var .s-content-var__fallback {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    text-align: center;
    transition: background 0.2s ease-in-out;
}

.s-content-var .s-content-var__fallback {
    border-left: 1px solid #7d62ec;
    background: #ffffff;
}

/* Valid styles */
.s-content-var.s-content-var--valid {
    border: 1px solid #7d62ec;
}

.s-content-var.s-content-var--valid .s-content-var__value {
    color: #7d62ec;
    background: #eee7ff;
}

/* Invalid styles */
.s-content-var.s-content-var--invalid {
    border: 1px solid #eb3a3a;
    position: relative;
}

.s-content-var.s-content-var--invalid .s-content-var__fallback {
    border-left: 1px solid #eb3a3a;
}

.s-content-var.s-content-var--invalid:before {
    content: '';
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    height: 10px;
    width: 11px;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.14246 1.19809C6.07757 1.0912 5.92244 1.0912 5.85754 1.19809L1.37555 8.58018C1.30812 8.69125 1.38808 8.83334 1.51802 8.83334H10.482C10.6119 8.83334 10.6919 8.69125 10.6244 8.58018L6.14246 1.19809ZM5.00275 0.679112C5.45705 -0.0691442 6.54295 -0.069144 6.99725 0.679112L11.4792 8.0612C11.9513 8.8387 11.3916 9.83334 10.482 9.83334H1.51802C0.608442 9.83334 0.0487157 8.8387 0.520764 8.0612L5.00275 0.679112Z' fill='%23F65353'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6 2.83334C6.27614 2.83334 6.5 3.0572 6.5 3.33334V5.66668C6.5 5.94282 6.27614 6.16668 6 6.16668C5.72386 6.16668 5.5 5.94282 5.5 5.66668V3.33334C5.5 3.0572 5.72386 2.83334 6 2.83334Z' fill='%23F65353'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6 6.83334C6.27614 6.83334 6.5 7.0572 6.5 7.33334V7.66668C6.5 7.94282 6.27614 8.16668 6 8.16668C5.72386 8.16668 5.5 7.94282 5.5 7.66668V7.33334C5.5 7.0572 5.72386 6.83334 6 6.83334Z' fill='%23F65353'/%3E%3C/svg%3E");    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
}

.s-content-var.s-content-var--invalid .s-content-var__value {
    background: #ffecec;
    padding-left: 27px;
}

/* Without fallback */
.s-content-var.s-content-var--without-fallback .s-content-var__fallback {
    display: none;
}

.s-content-var,
.s-content-var * {
  cursor: pointer;
}

.s-content-var.s-content-var--valid .s-content-var__value:hover {
  background: #e0d4ff;
}

.s-content-var.s-content-var--invalid .s-content-var__value:hover {
  background: #ffdfdf;
}

.mce-offscreen-selection {
    display: none;
}