:root {
    --modal-border-radius: 8px;
    --modal-padding: 24px;
    --modal-inner-inline-padding: 10px;

    --modal-small-width: 456px;
    --modal-medium-width: 768px;
    --modal-large-width: 991px;

    --modal-header-min-height: 36px;
    --modal-body-max-height: calc(var(--vh-100) - 240px);
}

.floating-window-wrapper>.modal {
    transform: scale(0.25);
    opacity: 0;
}

.floating-window-wrapper>.modal.show {
    transform: scale(1);
    opacity: 1;
}

.modal {
    max-height: calc(var(--vh-100) - 30px);
    border-radius: var(--modal-border-radius);
    padding: var(--modal-padding) calc(var(--modal-padding) - var(--modal-inner-inline-padding));
    background-color: white;
    width: auto;
    margin-inline: 16px;
    transition: transform 250ms, opacity 250ms;
    /*Another browsers*/
    -o-transition: transform 250ms, opacity 250ms;
    -ms-transition: transform 250ms, opacity 250ms;
    -moz-transition: transform 250ms, opacity 250ms;
    -webkit-transition: transform 250ms, opacity 250ms;
}

.modal .modal-header,
.modal .modal-body,
.modal .modal-footer {
    padding-inline: var(--modal-inner-inline-padding);
}

.modal>form>.separator,
.modal>.separator {
    margin-inline-start: var(--modal-inner-inline-padding);
    width: calc(100% - var(--modal-padding));
}

.modal>*:not(:last-child) {
    margin-bottom: 20px;
}

.modal .modal-header {
    display: flex;
    align-items: center;
    position: relative;
    min-height: var(--modal-header-min-height);
}

.modal .modal-header>* {
    flex-shrink: 1;
}

.modal .modal-header>*:not(:last-child) {
    margin-inline-end: 8px;
}

.modal .modal-header .modal-title {
    font-size: 1rem;
    font-weight: 500;
    width: calc(100% - (36px + 28px + var(--modal-padding)));
}

.modal .modal-header .modal-title>* {
    font-size: inherit;
    font-weight: inherit;
}

.modal .modal-header>.modal-symbol>i {
    font-size: 2rem;
}

.modal .modal-header>.modal-close-button {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    position: absolute;
    right: var(--modal-inner-inline-padding);
    top: 4px;
    z-index: 1;
}

.modal .modal-header>.modal-close-button i {
    font-size: 1.5rem;
    color: var(--color-primary);
}

.modal .modal-body {
    max-height: var(--modal-body-max-height);
    overflow-y: auto;
}

.modal .modal-body .modal-description {
    font-size: 0.875rem;
    color: var(--color-gray);
}

.modal .modal-footer .modal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.modal .modal-footer .modal-actions[alignment="start"] {
    justify-content: flex-start;
}

.modal .modal-footer .modal-actions[alignment="center"] {
    justify-content: center;
}

.modal .modal-footer .modal-actions[alignment="end"] {
    justify-content: flex-end;
}

.modal .modal-footer .modal-actions[alignment="between"] {
    justify-content: space-between;
}

.modal .modal-footer .modal-actions[alignment="around"] {
    justify-content: space-around;
}

.modal .modal-footer .modal-actions[alignment="evenly"] {
    justify-content: space-evenly;
}

.modal .modal-footer .modal-actions>* {
    min-width: 100px;
}

.modal .modal-footer .modal-actions>.button[role="close"] {
    background-color: var(--color-gray-l-40);
    color: var(--color-gray);
}

.modal .modal-footer .modal-actions[position="inline"] {
    flex-direction: row;
}

.modal .modal-footer .modal-actions[position="inline"]>*:not(:last-child) {
    margin-inline-end: 8px;
}

.modal .modal-footer .modal-actions[position="block"] {
    flex-direction: column;
}

.modal .modal-footer .modal-actions[position="block"]>* {
    width: 100%;
    margin-inline: 0;
}

.modal .modal-footer .modal-actions[position="block"]>*:not(:last-child) {
    margin-bottom: 8px;
}

/*Modal colors*/
.modal[color="info"] .modal-header>.modal-symbol>i {
    color: var(--color-info);
}

.modal[color="success"] .modal-header>.modal-symbol>i {
    color: var(--color-success);
}

.modal[color="warning"] .modal-header>.modal-symbol>i {
    color: var(--color-warning);
}

.modal[color="error"] .modal-header>.modal-symbol>i {
    color: var(--color-error);
}

/*Modal sizes*/
.modal[size="sm"] {
    width: calc(var(--modal-small-width) + (var(--modal-padding) * 2));
}

.modal[size="md"] {
    width: calc(var(--modal-medium-width) + (var(--modal-padding) * 2));
}

.modal[size="lg"] {
    width: calc(var(--modal-large-width) + (var(--modal-padding) * 2));
}

@media screen and (max-width: 1080px) {
    .modal[size="lg"] {
        width: 100%;
    }
}

@media screen and (max-width: 860px) {

    .modal[size="lg"],
    .modal[size="md"] {
        width: 100%;
    }
}

@media screen and (max-width: 546px) {

    .modal[size="lg"],
    .modal[size="md"],
    .modal[size="sm"] {
        width: 100%;
    }
}