.acf-field-selector { background: #fff; padding: 1.2rem; border-radius: 2px; box-shadow: inset 0 0 0 1px #1e1e1e; outline: 1px solid #0000; &__label { font-size: 20px; line-height: 1.2; margin-bottom: 1em; } &__fieldset { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: flex-end; > * { flex: 1 1 200px; } > .acf-field-blocks-field-settings { display: contents; } > .components-button { flex-grow: 0; flex-basis: auto; } > .smaller-field { flex-basis: 120px; } .components-base-control__help, .components-base-control__field:last-child { margin-bottom: 0; } .components-select-control__input { font-size: 13px; } } &__info-icon { position: relative; display: inline-flex; align-items: center; margin-left: 4px; vertical-align: middle; cursor: help; opacity: 0.6; &:hover { opacity: 1; } svg { fill: currentColor; } } &__tooltip { .components-popover__content { padding: 12px 16px; width: 360px; max-height: 400px; overflow-y: auto; } } &__tooltip-content { display: flex; flex-direction: column; gap: 10px; } &__tooltip-item { display: flex; flex-direction: column; gap: 2px; font-size: 12px; line-height: 1.4; strong { font-size: 12.5px; } span { opacity: 0.8; } } .components-notice { margin-top: 1.2rem; } .smaller-field select option:disabled { color: #999; } &.acf-field-selector--vertical { padding: 0; background: transparent; box-shadow: none; outline: none; .acf-field-selector__label { display: none; } .acf-field-selector__fieldset { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 1rem; > * { flex: 0 0 auto; width: 100%; } > .acf-field-blocks-field-settings { display: flex; } > .smaller-field { flex-basis: auto; } > .components-button { align-self: flex-end; width: auto; } > .acf-field-selector__footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; } } } &__footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; } &__footer-start { font-size: 12px; display: inline-flex; align-items: center; } } .acf-field-blocks-picker-modal { .components-modal__frame { width: 420px; max-width: 420px; } .components-modal__content { width: 420px; } &__doc-link { font-size: 12px; } }