.ppcp-r-modal { @import "../../global"; @import './button'; @import './fields'; .components-modal { &__header { height: 52px; padding: 20px 20px 0 20px; button { padding: 4px; } } &__content { margin-top: 60px; padding: 0 24px 28px 24px; } } &__container { width: 352px; max-width: 100%; } .has-size-small { .ppcp-r-modal__container { max-width: 252px; } .components-modal__content { margin-top: 48px; } } &__header { display: flex; flex-direction: column; align-items: center; gap: 8px; border-bottom: 1px solid $color-gray-500; padding-bottom: 18px; margin-bottom: 18px; } &__title { @include font(14, 20, 600); color: $color-black; } &__content { padding: 0; } .components-toggle-control { gap: 8px; margin: 0; label { @include font(13, 20, 400); color: $color-text-text; } .components-form-toggle__track { border-color: $color-border; } } &__field-row { display: flex; flex-direction: column; gap: 8px; &--save { align-items: flex-end; } input[type='text'] { margin: 0; border-color: $color-gray-700; } } &__field-rows { display: flex; flex-direction: column; gap: 18px; &--acdc { gap: 18px; .ppcp-r-modal__field-row--save { margin-top: 2px; } } .components-radio-control { label { @include font(14, 20, 400); color: $color-black; } &__input { border-color: $color-gray-700; margin-right: 0; &:checked { border: 1px solid $color-gray-700; background-color: $color-white; &::before { border-color: $color-blueberry; } } } } } .ppcp-r-modal__field-row--save button.is-primary { @include small-button; width: 100%; justify-content: center; padding: 6px 12px; } .ppcp-r__radio-content { label { @include font(13, 20, 400); } } &__content-title { @include font(13, 20, 600); color: $color-black; display: block; margin: 0 0 4px 0; } &__description { @include font(14, 20, 400); color: $color-black; margin: 0 0 12px 0; } }