:root {
    --border-radius-3xl: 24px;
    --border-radius-0: 0;
    --border-radius-24: var(--border-radius-3xl);
}
:root {
    --gap-3xl: 40px;
    --gap-0: 0px;
    --gap-40: var(--gap-3xl);
}
: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);
}