.customize-control-ast-responsive-spacing { /* Unit Screen wrap */ .customize-control-title { display: inline-block; } .ast-spacing-responsive-outer-wrapper { display: flex; position: relative; } .ast-spacing-input-item { margin-bottom: 0; } .ast-spacing-responsive-btns { display: block; text-align: center; line-height: 2; border: 1px solid #dddddd; background-color: #ffffff; border-radius: 0 3px 3px 0; > li { margin-bottom: 0; display: none; width: 35px; height: 26px; &.active { display: inline-block; } } button[type="button"] { padding: 0; cursor: pointer; background: none; border: none; opacity: .75; outline: none; width: 100%; height: 100%; > i { font-size: 15px; margin-top: 1px; vertical-align: middle; } } } .input-wrapper { &.ast-spacing-responsive-wrapper { display: inline-flex; } } .ast-spacing-responsive-units { position: absolute; transform: translateY(-100%); font-size: 11px; text-transform: uppercase; top: 0; right: 0; li.single-unit { display: inline-block; margin-left: 6px; width: 16px; text-align: center; user-select: none; opacity: 0.7; &.active { text-decoration: underline; opacity: 1; color: #000000; } } } .input-wrapper .ast-spacing-wrapper { display: none; li { text-align: center; -webkit-box-flex: 1; -ms-flex: auto; flex: auto; input.ast-spacing-input { text-align: center; display: block; font-size: 12px; padding: 4px 0; width: 100%; height: 28px; border: 1px solid #dddddd; border-right-width: 0; box-shadow: none; padding-left: 11px; } .ast-spacing-connected { color: #1e8cbe; } } &.active { display: flex; } span.ast-spacing-title { text-transform: uppercase; font-size: 10px; opacity: .75; } .ast-spacing-input-item-link { .ast-spacing-connected { display: none; } &.disconnected { .ast-spacing-disconnected { display: none; } .ast-spacing-connected { display: block; } } span { width: 35px; height: 26px; line-height: 26px; font-size: 14px; border: 1px solid #dddddd; background-color: #ffffff; border-radius: 3px 0 0 3px; border-right-width: 0; } } } }