:root {
    --modal-border-radius: var(--border-radius-24);
    --modal-vertical-padding: var(--gap-40);
    --modal-s-width: 500px;
    --modal-m-width: 600px;
    --modal-l-width: 800px;
    --modal-xl-width: 1140px;
}

.wrapper {
    padding-top: var(--modal-vertical-padding);
    padding-bottom: var(--modal-vertical-padding);
}

.component {
    width: 100%;
    max-width: 100%;
    border-radius: var(--modal-border-radius);
}

.fullscreen {
    padding-top: var(--gap-0);
    padding-bottom: var(--gap-0);
    overflow: hidden;
}

.fullscreen .component {
        flex: 1;
        border-radius: var(--border-radius-0);
        overflow: auto;
    }

.size-500 {
    width: var(--modal-s-width);
}

.size-600 {
    width: var(--modal-m-width);
}

.size-800 {
    width: var(--modal-l-width);
}

.size-1140 {
    width: var(--modal-xl-width);
}