.customize-control-ast-border { /* Unit Screen wrap */ .customize-control-title { display: inline-block; } .ast-border-outer-wrapper { display: flex; position: relative; } .ast-border-wrapper { display: flex; } .ast-border-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 { width: 15px; height: 15px; font-size: 15px; margin-top: 1px; } } } .input-wrapper .ast-border-wrapper { display: none; li { text-align: center; -webkit-box-flex: 1; -ms-flex: auto; flex: auto; margin-bottom: 0; input.ast-border-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-border-connected { color: #ffffff; } &:last-child input.ast-border-input { border-right-width: 1px; border-radius: 0 3px 3px 0; } } &.active { display: flex; } span.ast-border-title { text-transform: uppercase; font-size: 10px; opacity: .75; } .ast-border-input-item-link { .ast-border-connected { display: none; } &.disconnected { .ast-border-disconnected { display: none; } .ast-border-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; } .ast-border-connected { background-color: #1e8cbe; } } } }