@inkline/inkline
Version:
Inkline is the intuitive UI Components library that gives you a developer-friendly foundation for building high-quality, accessible, and customizable Vue.js 3 Design Systems.
510 lines (508 loc) • 25.4 kB
CSS
/**
* Modal
*/
.modal-wrapper {
background: var(--modal--wrapper--background, rgba(0, 0, 0, 0.75));
position: fixed;
top: 0;
left: 0;
z-index: 2000;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.modal-wrapper .modal {
text-align: left;
list-style: none;
line-height: var(--modal--line-height, var(--line-height));
display: block;
width: calc(100% - var(--modal--margin-left, var(--margin-left)) - var(--modal--margin-right, var(--margin-right)));
max-width: var(--modal--width, 480px);
border-radius: var(--modal--border-radius, var(--modal--border-top-left-radius, var(--border-top-left-radius)) var(--modal--border-top-right-radius, var(--border-top-right-radius)) var(--modal--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--modal--border-bottom-left-radius, var(--border-bottom-left-radius)));
box-shadow: var(--modal--box-shadow, var(--modal--box-shadow-x-offset, var(--box-shadow-offset-x)) var(--modal--box-shadow-y-offset, var(--box-shadow-offset-y)) var(--modal--box-shadow-blur-radius, var(--box-shadow-blur-radius)) var(--modal--box-shadow-spread-radius, var(--box-shadow-spread-radius)) var(--modal--box-shadow-color, var(--box-shadow-color)));
}
.modal-wrapper .modal > .modal-header {
display: flex;
justify-content: space-between;
background: var(--modal--header--background, var(--modal--background));
border-style: var(--modal--header--border-style, var(--modal--header--border-top-style, var(--modal--border-top-style, var(--border-top-style))) var(--modal--header--border-right-style, var(--modal--border-right-style, var(--border-right-style))) var(--modal--header--border-bottom-style, var(--modal--border-bottom-style, var(--border-bottom-style))) var(--modal--header--border-left-style, var(--modal--border-left-style, var(--border-left-style))));
border-width: var(--modal--header--border-width, var(--modal--header--border-top-width, var(--modal--border-top-width, var(--border-top-width))) var(--modal--header--border-right-width, var(--modal--border-right-width, var(--border-right-width))) var(--modal--header--border-bottom-width, var(--modal--border-bottom-width, var(--border-bottom-width))) var(--modal--header--border-left-width, var(--modal--border-left-width, var(--border-left-width))));
border-color: var(--modal--header--border-color, var(--modal--header--border-top-color, var(--modal--border-top-color, var(--border-top-color))) var(--modal--header--border-right-color, var(--modal--border-right-color, var(--border-right-color))) var(--modal--header--border-bottom-color, var(--modal--border-bottom-color, var(--border-bottom-color))) var(--modal--header--border-left-color, var(--modal--border-left-color, var(--border-left-color))));
padding: var(--modal--header--padding, var(--modal--header--padding-top, var(--modal--padding-top, var(--padding-top))) var(--modal--header--padding-right, var(--modal--padding-right, var(--padding-right))) var(--modal--header--padding-bottom, var(--modal--padding-bottom, var(--padding-bottom))) var(--modal--header--padding-left, var(--modal--padding-left, var(--padding-left))));
color: var(--modal--header--color, var(--modal--color));
}
.modal-wrapper .modal > .modal-header > .close {
display: flex;
justify-content: center;
align-items: center;
height: 1.5rem;
width: 1.5rem;
line-height: 1.5rem;
font-size: 0.5rem;
cursor: pointer;
padding: 0;
border: 0;
transition: background-color 0.3s ease;
background-color: transparent;
border-radius: var(--modal--border-radius, var(--modal--border-top-left-radius, var(--border-top-left-radius)) var(--modal--border-top-right-radius, var(--border-top-right-radius)) var(--modal--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--modal--border-bottom-left-radius, var(--border-bottom-left-radius)));
}
.modal-wrapper .modal > .modal-header > .close > .icon {
mask-image: url('data:image/svg+xml; utf8, <svg fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><title>times</title><path d="M27.745 22.495c-0-0-0-0-0-0l-8.494-8.494 8.494-8.494c0-0 0-0 0-0 0.091-0.091 0.158-0.198 0.2-0.312 0.116-0.311 0.050-0.675-0.2-0.925l-4.013-4.013c-0.25-0.25-0.614-0.316-0.925-0.2-0.114 0.042-0.221 0.109-0.312 0.2 0 0-0 0-0 0l-8.494 8.494-8.494-8.494c-0-0-0-0-0-0-0.091-0.091-0.198-0.158-0.312-0.2-0.311-0.116-0.675-0.050-0.925 0.2l-4.013 4.013c-0.25 0.25-0.316 0.614-0.2 0.925 0.042 0.114 0.109 0.221 0.2 0.312 0 0 0 0 0 0l8.494 8.494-8.494 8.494c-0 0-0 0-0 0-0.091 0.091-0.157 0.198-0.2 0.312-0.116 0.311-0.050 0.675 0.2 0.925l4.013 4.013c0.25 0.25 0.614 0.316 0.925 0.2 0.114-0.042 0.221-0.109 0.312-0.2 0-0 0-0 0-0l8.494-8.494 8.494 8.494c0 0 0 0 0 0 0.092 0.091 0.198 0.158 0.312 0.2 0.311 0.116 0.675 0.050 0.925-0.2l4.013-4.013c0.25-0.25 0.316-0.614 0.2-0.925-0.042-0.114-0.109-0.221-0.2-0.312z"></path></svg>');
-webkit-mask-image: url('data:image/svg+xml; utf8, <svg fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><title>times</title><path d="M27.745 22.495c-0-0-0-0-0-0l-8.494-8.494 8.494-8.494c0-0 0-0 0-0 0.091-0.091 0.158-0.198 0.2-0.312 0.116-0.311 0.050-0.675-0.2-0.925l-4.013-4.013c-0.25-0.25-0.614-0.316-0.925-0.2-0.114 0.042-0.221 0.109-0.312 0.2 0 0-0 0-0 0l-8.494 8.494-8.494-8.494c-0-0-0-0-0-0-0.091-0.091-0.198-0.158-0.312-0.2-0.311-0.116-0.675-0.050-0.925 0.2l-4.013 4.013c-0.25 0.25-0.316 0.614-0.2 0.925 0.042 0.114 0.109 0.221 0.2 0.312 0 0 0 0 0 0l8.494 8.494-8.494 8.494c-0 0-0 0-0 0-0.091 0.091-0.157 0.198-0.2 0.312-0.116 0.311-0.050 0.675 0.2 0.925l4.013 4.013c0.25 0.25 0.614 0.316 0.925 0.2 0.114-0.042 0.221-0.109 0.312-0.2 0-0 0-0 0-0l8.494-8.494 8.494 8.494c0 0 0 0 0 0 0.092 0.091 0.198 0.158 0.312 0.2 0.311 0.116 0.675 0.050 0.925-0.2l4.013-4.013c0.25-0.25 0.316-0.614 0.2-0.925-0.042-0.114-0.109-0.221-0.2-0.312z"></path></svg>');
mask-position: center center;
-webkit-mask-position: center center;
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-size: calc(var(--modal--font-size, var(--font-size)) / 2);
-webkit-mask-size: calc(var(--modal--font-size, var(--font-size)) / 2);
background-color: var(--modal--header--color, var(--modal--color));
width: var(--modal--font-size, var(--font-size));
height: var(--modal--font-size, var(--font-size));
}
.modal-wrapper .modal > .modal-header > .close:hover, .modal-wrapper .modal > .modal-header > .close:focus {
outline: none;
background-color: rgba(0, 0, 0, 0.1);
}
.modal-wrapper .modal > .modal-header > .close:active {
background-color: rgba(0, 0, 0, 0.15);
}
.modal-wrapper .modal > .modal-body {
display: flex;
flex-direction: row;
background: var(--modal--body--background, var(--modal--background));
color: var(--modal--body--color, var(--modal--color));
border-style: var(--modal--body--border-style, var(--modal--body--border-top-style, var(--modal--border-top-style, var(--border-top-style))) var(--modal--body--border-right-style, var(--modal--border-right-style, var(--border-right-style))) var(--modal--body--border-bottom-style, var(--modal--border-bottom-style, var(--border-bottom-style))) var(--modal--body--border-left-style, var(--modal--border-left-style, var(--border-left-style))));
border-width: var(--modal--body--border-width, var(--modal--body--border-top-width, var(--modal--border-top-width, var(--border-top-width))) var(--modal--body--border-right-width, var(--modal--border-right-width, var(--border-right-width))) var(--modal--body--border-bottom-width, var(--modal--border-bottom-width, var(--border-bottom-width))) var(--modal--body--border-left-width, var(--modal--border-left-width, var(--border-left-width))));
border-color: var(--modal--body--border-color, var(--modal--body--border-top-color, var(--modal--border-top-color, var(--border-top-color))) var(--modal--body--border-right-color, var(--modal--border-right-color, var(--border-right-color))) var(--modal--body--border-bottom-color, var(--modal--border-bottom-color, var(--border-bottom-color))) var(--modal--body--border-left-color, var(--modal--border-left-color, var(--border-left-color))));
padding: var(--modal--body--padding, var(--modal--body--padding-top, var(--modal--padding-top, var(--padding-top))) var(--modal--body--padding-right, var(--modal--padding-right, var(--padding-right))) var(--modal--body--padding-bottom, var(--modal--padding-bottom, var(--padding-bottom))) var(--modal--body--padding-left, var(--modal--padding-left, var(--padding-left))));
}
.modal-wrapper .modal > .modal-body .modal-icon {
margin-right: var(--modal--icon--margin-right, var(--modal--body--padding-right, var(--padding-right)));
}
.modal-wrapper .modal > .modal-body .modal-content {
width: 100%;
display: block;
}
.modal-wrapper .modal > .modal-footer {
background: var(--modal--footer--background, var(--modal--background));
color: var(--modal--footer--color, var(--modal--color));
border-style: var(--modal--footer--border-style, var(--modal--footer--border-top-style, var(--modal--border-top-style, var(--border-top-style))) var(--modal--footer--border-right-style, var(--modal--border-right-style, var(--border-right-style))) var(--modal--footer--border-bottom-style, var(--modal--border-bottom-style, var(--border-bottom-style))) var(--modal--footer--border-left-style, var(--modal--border-left-style, var(--border-left-style))));
border-width: var(--modal--footer--border-width, var(--modal--footer--border-top-width, var(--modal--border-top-width, var(--border-top-width))) var(--modal--footer--border-right-width, var(--modal--border-right-width, var(--border-right-width))) var(--modal--footer--border-bottom-width, var(--modal--border-bottom-width, var(--border-bottom-width))) var(--modal--footer--border-left-width, var(--modal--border-left-width, var(--border-left-width))));
border-color: var(--modal--footer--border-color, var(--modal--footer--border-top-color, var(--modal--border-top-color, var(--border-top-color))) var(--modal--footer--border-right-color, var(--modal--border-right-color, var(--border-right-color))) var(--modal--footer--border-bottom-color, var(--modal--border-bottom-color, var(--border-bottom-color))) var(--modal--footer--border-left-color, var(--modal--border-left-color, var(--border-left-color))));
padding: var(--modal--footer--padding, var(--modal--footer--padding-top, var(--modal--padding-top, var(--padding-top))) var(--modal--footer--padding-right, var(--modal--padding-right, var(--padding-right))) var(--modal--footer--padding-bottom, var(--modal--padding-bottom, var(--padding-bottom))) var(--modal--footer--padding-left, var(--modal--padding-left, var(--padding-left))));
}
.modal-wrapper .modal > *:first-child {
border-top-left-radius: var(--modal--border-top-left-radius, var(--border-top-left-radius));
border-top-right-radius: var(--modal--border-top-right-radius, var(--border-top-right-radius));
}
.modal-wrapper .modal > *:last-child {
border-bottom-left-radius: var(--modal--border-bottom-left-radius, var(--border-bottom-left-radius));
border-bottom-right-radius: var(--modal--border-bottom-right-radius, var(--border-bottom-right-radius));
}
.modal-wrapper .modal > .modal-header + .modal-body,
.modal-wrapper .modal > .modal-header + .modal-footer,
.modal-wrapper .modal > .modal-body + .modal-footer,
.modal-wrapper .modal > .modal-body + .modal-body {
border-top-width: 0;
}
.modal-wrapper.-fullscreen {
display: block;
}
.modal-wrapper.-fullscreen > .modal {
width: 100%;
height: 100%;
max-width: 100%;
display: flex;
flex-direction: column;
}
.modal-wrapper.-fullscreen > .modal > .modal-header {
border-radius: var(--modal--fullscreen--header--border-radius, 0);
}
.modal-wrapper.-fullscreen > .modal > .modal-body {
border-radius: var(--modal--fullscreen--body--border-radius, 0);
flex: 1;
overflow: auto;
}
.modal-wrapper.-fullscreen > .modal > .modal-footer {
border-radius: var(--modal--fullscreen--footer--border-radius, 0);
}
.modal-wrapper.-alert > .modal > .modal-footer, .modal-wrapper.-confirm > .modal > .modal-footer, .modal-wrapper.-prompt > .modal > .modal-footer {
display: flex;
justify-content: flex-end;
}
.modal-wrapper.-alert > .modal > .modal-footer .button + .button, .modal-wrapper.-confirm > .modal > .modal-footer .button + .button, .modal-wrapper.-prompt > .modal > .modal-footer .button + .button {
margin-left: var(--modal--footer--button--margin-left, var(--margin-left-1-2));
}
/**
* Color variants
*/
.modal-wrapper.-primary {
--modal--background: var(--modal--primary--background, var(--color-primary));
--modal--border-top-color: var(
--modal--primary--border-top-color,
var(--color-primary-shade-50)
);
--modal--border-right-color: var(
--modal--primary--border-right-color,
var(--color-primary-shade-50)
);
--modal--border-bottom-color: var(
--modal--primary--border-bottom-color,
var(--color-primary-shade-50)
);
--modal--border-left-color: var(
--modal--primary--border-left-color,
var(--color-primary-shade-50)
);
--modal--color: var(--modal--primary--color, var(--contrast-text-color-primary));
--modal--header--background: var(
--modal--primary--header--background,
var(--color-primary-shade-50)
);
--modal--footer--background: var(
--modal--primary--footer--background,
var(--color-primary-shade-50)
);
}
.modal-wrapper.-secondary {
--modal--background: var(--modal--secondary--background, var(--color-secondary));
--modal--border-top-color: var(
--modal--secondary--border-top-color,
var(--color-secondary-shade-50)
);
--modal--border-right-color: var(
--modal--secondary--border-right-color,
var(--color-secondary-shade-50)
);
--modal--border-bottom-color: var(
--modal--secondary--border-bottom-color,
var(--color-secondary-shade-50)
);
--modal--border-left-color: var(
--modal--secondary--border-left-color,
var(--color-secondary-shade-50)
);
--modal--color: var(--modal--secondary--color, var(--contrast-text-color-secondary));
--modal--header--background: var(
--modal--secondary--header--background,
var(--color-secondary-shade-50)
);
--modal--footer--background: var(
--modal--secondary--footer--background,
var(--color-secondary-shade-50)
);
}
.modal-wrapper.-light {
--modal--background: var(--modal--light--background, var(--color-white));
--modal--border-top-color: var(--modal--light--border-top-color, var(--color-light));
--modal--border-right-color: var(--modal--light--border-right-color, var(--color-light));
--modal--border-bottom-color: var(--modal--light--border-bottom-color, var(--color-light));
--modal--border-left-color: var(--modal--light--border-left-color, var(--color-light));
--modal--color: var(--modal--light--color, var(--contrast-text-color-white));
--modal--header--background: var(--modal--light--header--background, var(--color-gray-50));
--modal--footer--background: var(--modal--light--footer--background, var(--color-gray-50));
}
.modal-wrapper.-dark {
--modal--background: var(--modal--dark--background, var(--color-dark));
--modal--border-top-color: var(--modal--dark--border-top-color, var(--color-dark-tint-50));
--modal--border-right-color: var(
--modal--dark--border-right-color,
var(--color-dark-tint-50)
);
--modal--border-bottom-color: var(
--modal--dark--border-bottom-color,
var(--color-dark-tint-50)
);
--modal--border-left-color: var(
--modal--dark--border-left-color,
var(--color-dark-tint-50)
);
--modal--color: var(--modal--dark--color, var(--contrast-text-color-dark));
--modal--header--background: var(
--modal--dark--header--background,
var(--color-dark-tint-50)
);
--modal--footer--background: var(
--modal--dark--footer--background,
var(--color-dark-tint-50)
);
}
.modal-wrapper.-info {
--modal--background: var(--modal--info--background, var(--color-info));
--modal--border-top-color: var(--modal--info--border-top-color, var(--color-info-shade-50));
--modal--border-right-color: var(
--modal--info--border-right-color,
var(--color-info-shade-50)
);
--modal--border-bottom-color: var(
--modal--info--border-bottom-color,
var(--color-info-shade-50)
);
--modal--border-left-color: var(
--modal--info--border-left-color,
var(--color-info-shade-50)
);
--modal--color: var(--modal--info--color, var(--contrast-text-color-info));
--modal--header--background: var(
--modal--info--header--background,
var(--color-info-shade-50)
);
--modal--footer--background: var(
--modal--info--footer--background,
var(--color-info-shade-50)
);
}
.modal-wrapper.-success {
--modal--background: var(--modal--success--background, var(--color-success));
--modal--border-top-color: var(
--modal--success--border-top-color,
var(--color-success-shade-50)
);
--modal--border-right-color: var(
--modal--success--border-right-color,
var(--color-success-shade-50)
);
--modal--border-bottom-color: var(
--modal--success--border-bottom-color,
var(--color-success-shade-50)
);
--modal--border-left-color: var(
--modal--success--border-left-color,
var(--color-success-shade-50)
);
--modal--color: var(--modal--success--color, var(--contrast-text-color-success));
--modal--header--background: var(
--modal--success--header--background,
var(--color-success-shade-50)
);
--modal--footer--background: var(
--modal--success--footer--background,
var(--color-success-shade-50)
);
}
.modal-wrapper.-warning {
--modal--background: var(--modal--warning--background, var(--color-warning));
--modal--border-top-color: var(
--modal--warning--border-top-color,
var(--color-warning-shade-50)
);
--modal--border-right-color: var(
--modal--warning--border-right-color,
var(--color-warning-shade-50)
);
--modal--border-bottom-color: var(
--modal--warning--border-bottom-color,
var(--color-warning-shade-50)
);
--modal--border-left-color: var(
--modal--warning--border-left-color,
var(--color-warning-shade-50)
);
--modal--color: var(--modal--warning--color, var(--contrast-text-color-warning));
--modal--header--background: var(
--modal--warning--header--background,
var(--color-warning-shade-50)
);
--modal--footer--background: var(
--modal--warning--footer--background,
var(--color-warning-shade-50)
);
}
.modal-wrapper.-danger {
--modal--background: var(--modal--danger--background, var(--color-danger));
--modal--border-top-color: var(
--modal--danger--border-top-color,
var(--color-danger-shade-50)
);
--modal--border-right-color: var(
--modal--danger--border-right-color,
var(--color-danger-shade-50)
);
--modal--border-bottom-color: var(
--modal--danger--border-bottom-color,
var(--color-danger-shade-50)
);
--modal--border-left-color: var(
--modal--danger--border-left-color,
var(--color-danger-shade-50)
);
--modal--color: var(--modal--danger--color, var(--contrast-text-color-danger));
--modal--header--background: var(
--modal--danger--header--background,
var(--color-danger-shade-50)
);
--modal--footer--background: var(
--modal--danger--footer--background,
var(--color-danger-shade-50)
);
}
/**
* Size variants
*/
.modal-wrapper.-sm {
--modal--border-top-left-radius: var(
--modal--sm--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-sm))
);
--modal--border-top-right-radius: var(
--modal--sm--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
);
--modal--border-bottom-right-radius: var(
--modal--sm--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm))
);
--modal--border-bottom-left-radius: var(
--modal--sm--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm))
);
--modal--font-size: var(
--modal--sm--font-size,
calc(var(--font-size) * var(--size-multiplier-sm))
);
--modal--margin-top: var(
--modal--sm--margin-top,
calc(var(--margin-top) * var(--size-multiplier-sm))
);
--modal--margin-right: var(
--modal--sm--margin-right,
calc(var(--margin-right) * var(--size-multiplier-sm))
);
--modal--margin-bottom: var(
--modal--sm--margin-bottom,
calc(var(--margin-bottom) * var(--size-multiplier-sm))
);
--modal--margin-left: var(
--modal--sm--margin-left,
calc(var(--margin-left) * var(--size-multiplier-sm))
);
--modal--padding-top: var(
--modal--sm--padding-top,
calc(var(--padding-top) * var(--size-multiplier-sm))
);
--modal--padding-right: var(
--modal--sm--padding-right,
calc(var(--padding-right) * var(--size-multiplier-sm))
);
--modal--padding-bottom: var(
--modal--sm--padding-bottom,
calc(var(--padding-bottom) * var(--size-multiplier-sm))
);
--modal--padding-left: var(
--modal--sm--padding-left,
calc(var(--padding-left) * var(--size-multiplier-sm))
);
--modal--width: var(--modal--sm--width, calc(480px * var(--size-multiplier-sm)));
}
.modal-wrapper.-md {
--modal--border-top-left-radius: var(
--modal--md--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-md))
);
--modal--border-top-right-radius: var(
--modal--md--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-md))
);
--modal--border-bottom-right-radius: var(
--modal--md--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-md))
);
--modal--border-bottom-left-radius: var(
--modal--md--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-md))
);
--modal--font-size: var(
--modal--md--font-size,
calc(var(--font-size) * var(--size-multiplier-md))
);
--modal--margin-top: var(
--modal--md--margin-top,
calc(var(--margin-top) * var(--size-multiplier-md))
);
--modal--margin-right: var(
--modal--md--margin-right,
calc(var(--margin-right) * var(--size-multiplier-md))
);
--modal--margin-bottom: var(
--modal--md--margin-bottom,
calc(var(--margin-bottom) * var(--size-multiplier-md))
);
--modal--margin-left: var(
--modal--md--margin-left,
calc(var(--margin-left) * var(--size-multiplier-md))
);
--modal--padding-top: var(
--modal--md--padding-top,
calc(var(--padding-top) * var(--size-multiplier-md))
);
--modal--padding-right: var(
--modal--md--padding-right,
calc(var(--padding-right) * var(--size-multiplier-md))
);
--modal--padding-bottom: var(
--modal--md--padding-bottom,
calc(var(--padding-bottom) * var(--size-multiplier-md))
);
--modal--padding-left: var(
--modal--md--padding-left,
calc(var(--padding-left) * var(--size-multiplier-md))
);
--modal--width: var(--modal--md--width, calc(480px * var(--size-multiplier-md)));
}
.modal-wrapper.-lg {
--modal--border-top-left-radius: var(
--modal--lg--border-top-left-radius,
calc(var(--border-top-left-radius) * var(--size-multiplier-lg))
);
--modal--border-top-right-radius: var(
--modal--lg--border-top-right-radius,
calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
);
--modal--border-bottom-right-radius: var(
--modal--lg--border-bottom-right-radius,
calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg))
);
--modal--border-bottom-left-radius: var(
--modal--lg--border-bottom-left-radius,
calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg))
);
--modal--font-size: var(
--modal--lg--font-size,
calc(var(--font-size) * var(--size-multiplier-lg))
);
--modal--margin-top: var(
--modal--lg--margin-top,
calc(var(--margin-top) * var(--size-multiplier-lg))
);
--modal--margin-right: var(
--modal--lg--margin-right,
calc(var(--margin-right) * var(--size-multiplier-lg))
);
--modal--margin-bottom: var(
--modal--lg--margin-bottom,
calc(var(--margin-bottom) * var(--size-multiplier-lg))
);
--modal--margin-left: var(
--modal--lg--margin-left,
calc(var(--margin-left) * var(--size-multiplier-lg))
);
--modal--padding-top: var(
--modal--lg--padding-top,
calc(var(--padding-top) * var(--size-multiplier-lg))
);
--modal--padding-right: var(
--modal--lg--padding-right,
calc(var(--padding-right) * var(--size-multiplier-lg))
);
--modal--padding-bottom: var(
--modal--lg--padding-bottom,
calc(var(--padding-bottom) * var(--size-multiplier-lg))
);
--modal--padding-left: var(
--modal--lg--padding-left,
calc(var(--padding-left) * var(--size-multiplier-lg))
);
--modal--width: var(--modal--lg--width, calc(480px * var(--size-multiplier-lg)));
}