/*------------------------------------------------------------------
[5 - Modals]
*/
.modal {
    &-content {
        border: 0;
        border-radius: 2rem;

        i {
            color: var(--color-1);
        }
    }

    &-body {
        padding: 2rem;
    }

    &-footer {
        justify-content: center;
        border: 0;
        padding: 0 2rem 2rem 2rem;
    }

    &.image-settings {
        @media (min-width: $breakpoint-small) {
            .modal-dialog {
                min-height: calc(100% - 1.75rem);
                transform: translateY(50%);
                @include transition(transform .5s linear);
            }

            &.show .modal-dialog {
                transform: none;
            }

            .modal-content {
                border-radius: 2rem 2rem 0 0;
            }
        }

        @media (max-width: $breakpoint-sm) {
            .modal-dialog {
                min-height: calc(100% - var(--bs-modal-margin)* 2);
            }
        }
    }
}
