@require 'components/forms.styl'
@require 'components/popover.styl'
@require 'settings/breakpoints.styl'

// The federated share dialogs keep overflow visible so the contact
// suggestions dropdown can pop over the dialog, which disables the dialog's
// native scrolling. These classes pass the height constraint down through
// the flex chain so only the members list scrolls.
.share-dialog-scrollable-content
    display flex
    flex-direction column
    min-height 0
    // keep the contact suggestions dropdown visible over the dialog;
    // !important to win over MUI's DialogContent overflow-y auto
    overflow visible !important // @stylint ignore

    // cozy-ui dialogs expose no componentsProps hook for their
    // .dialogContentInner wrapper, but the classname is a stable contract:
    // cozy-ui's own MUI theme overrides style it by name
    > :global(.dialogContentInner) // @stylint ignore Naming imposed by cozy-ui
        display flex
        flex-direction column
        flex 1 1 auto
        min-height 0

.share-dialog-scrollable-body
    display flex
    flex-direction column
    flex 1 1 auto
    min-height 0

.share-dialog-members
    flex 1 1 auto
    min-height 0
    overflow-y auto
    width 100%

.share-byemail-onlybylink
    background var(--defaultBackgroundColor)
    padding 1rem 2rem
    margin -1.5rem -2rem 1rem

    +small-screen()
        padding 1rem
        margin -1.5rem -1rem 1rem

.share-modal-content
    @extend $form
    @extend $form-text
    @extend $form-button
    min-height: rem(250)

    .coz-form-group
        flex-shrink 0

.aligned-dropdown-button
  margin-right: -1rem

.coz-form-group
    margin 0

    h3
        margin .3rem 0 0

    h4
        margin 0 0 .3rem 0

    .coz-form
        margin 0

    .coz-form-desc
        color var(--secondaryTextColor)

input[type=text]
    width 100%