$eps-modal-background-color: theme-colors(light);
$eps-modal-width: px-to-rem(700);
$eps-modal-border-radius: $eps-radius;
$eps-modal-overlay: rgba(theme-colors(dark), $opacity-05);
$eps-modal-zindex: $eps-zindex-modal-backdrop;
$eps-modal-header-type: type(text, md);
$eps-modal-header-background-color: theme-colors(info);
$eps-modal-header-color: theme-colors(light);
$eps-modal-header-height: spacing(44);
$eps-modal-header-padding: spacing(10) spacing(16);
$eps-modal-header-border-radius: $eps-radius;
$eps-modal-icon-spacing: spacing(10);
$eps-modal-body-padding: spacing(30);
$eps-modal-close-button-spacing: spacing(16);
$eps-modal-close-button-border: solid 1px theme-colors(light);
$eps-modal-animation: $eps-pop-animation;
$eps-tip-padding-start: spacing(12);
$eps-tip-border-start: 3px solid theme-colors(info);
$eps-tip-margin-bottom: spacing(30);
$eps-tip-margin-top: spacing(30);
:root {
--eps-modal-background-color: #{$eps-modal-background-color};
--eps-modal-header-background-color: #{$eps-modal-header-background-color};
}
// Dark
$eps-dark-modal-background-color: dark-tints(700);
$eps-dark-modal-header-background-color: dark-theme-colors(info);
.eps-theme-dark {
--eps-modal-background-color: #{$eps-dark-modal-background-color};
--eps-modal-header-background-color: #{$eps-dark-modal-header-background-color};
}
/** ----------------------------------------------------------------
EPS Modal
---------------------------------------------------------------- */
.#{$eps-prefix}modal {
max-width: $eps-modal-width;
background: var(--eps-modal-background-color);
border-radius: $eps-modal-border-radius;
animation: $eps-modal-animation;
&__overlay {
background: $eps-modal-overlay;
position: fixed;
display: flex;
top: 0;
left: 0;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
z-index: $eps-modal-zindex;
}
&__header {
font-size: $eps-modal-header-type;
background: var(--eps-modal-header-background-color);
height: $eps-modal-header-height;
padding: $eps-modal-header-padding;
border-radius: $eps-modal-header-border-radius;
&,
& .title {
color: $eps-modal-header-color;
}
}
&__icon {
margin-inline-end: $eps-modal-icon-spacing;
}
&__body {
padding: $eps-modal-body-padding;
}
&__tip, .#{$eps-prefix}tip {
padding-inline-start: $eps-tip-padding-start;
border-inline-start: $eps-tip-border-start;
&:not(:last-child) {
margin-bottom: $eps-tip-margin-bottom;
}
&:not(:first-child) {
margin-top: $eps-tip-margin-top;
}
}
&__section:not(:first-child) {
margin-top: spacing(30);
}
&__close-wrapper {
padding-inline-start: $eps-modal-close-button-spacing;
border-inline-start: $eps-modal-close-button-border;
}
}