/* @group @a-tel-action-close */

/* @end @a-tel-action-close */

/* @group @variables */

[class*="m-tel-action-dialog"] {
--tel-action-dialog-max-height: 100%;
--tel-action-opacity: 0;
--tel-action-visibility: hidden;
--tel-action-transition: var(--fade-transition);
--tel-action-pointer-events: none;
}

@media all and (min-width: 48em) {

[class*="m-tel-action-dialog"] {
--tel-action-dialog-max-height: 30rem;
}

}

[class*="a-tel-action-toggle"]:checked ~ [class*="m-tel-action-dialog"] {
--tel-action-opacity: 1;
--tel-action-visibility: visible;
--tel-action-pointer-events: auto;
}

[class*="m-tel-action-dialog"] {
}

[class*="a-tel-action-close"] {
--tel-action-close-pointer-events: none;
--tel-action-close-visibility: hidden;
}

[class*="a-tel-action-toggle"]:checked ~ [class*="a-tel-action-close"] {
--tel-action-close-pointer-events: auto;
--tel-action-close-visibility: visible;
}

/* @end @variables */

/* @group @m-tel-action-dialog */

[class*="m-tel-action-dialog"] {
position: fixed;
z-index: 121;
overflow: clip;
overflow-y: auto;
inset: 0;
display: grid;
justify-content: center;
align-items: center;
margin: auto;
padding: 1.5rem 1.5rem 1.875rem;
opacity: var(--tel-action-opacity);
visibility: var(--tel-action-visibility);
pointer-events: none;
transition: var(--modal-fade-transition);
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}

[class*="a-tel-action-dialog-body"] {
display: grid;
align-items: center;
grid-template-rows: auto 1fr auto auto;
gap: 1.5rem;
width: 100%;
max-width: 30rem;
max-height: var(--tel-action-dialog-max-height);
padding: 1.5rem;
border-radius: .5rem;
background-color: hsl(0deg 0% 100%);
pointer-events: var(--tel-action-pointer-events);
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}

[class*="a-tel-action-close"] {
position: fixed;
z-index: 120;
inset: 0;
visibility: var(--tel-action-close-visibility);
background-color: hsl(220deg 5% 20% / 85%);
-webkit-backdrop-filter: var(--backdrop-filter);
backdrop-filter: var(--backdrop-filter);
pointer-events: var(--tel-action-close-pointer-events);
transition: var(--background-color-transition);
}

[class*="m-tel-action-dialog"] :where(h2, p, ul) {
margin-bottom: 0;
padding-left: 0;
list-style: none;
}

[class*="a-tel-action-support"] {
align-self: center;
}

[class*="m-tel-action-dialog"] h2 {
font-size: 1.25rem;
line-height: 1.2;
text-align: center;
font-weight: 600;
font-variation-settings-strong: "wght" 600;
color: hsl(347deg 84% 59%);
}

[class*="a-tel-action-note"] {
padding-top: 1.5rem;
border-top: 1px solid hsl(220deg 5% 85%);
font-size: .875rem;
line-height: 1.42857143;
text-align: center;
}

[class*="a-tel-action-footer"] {
display: grid;
width: 10rem;
margin: 0 auto;
}

/* @end @m-tel-action-dialog */

/* -------------------------------------------------------- */

/* @group @a-tel-close */

[class*="a-tel-close"] {
display: grid;
justify-content: center;
align-items: center;
width: 3rem;
height: 3rem;
margin-left: auto;
background-color: hsl(0deg 0% 100%);
border: 1px solid hsl(220deg 5% 50%);
border-radius: 50%;
color: hsl(220deg 5% 50%);
cursor: pointer;
transition: var(--link-secondary-transition);
}

[class*="a-tel-close"]:hover,
[class*="a-tel-close"]:focus {
background-color: hsl(220deg 5% 50%);
border-color: hsl(220deg 5% 50%);
color: hsl(0deg 0% 100%);
}

[class*="a-tel-close"] svg {
width: 1rem;
height: auto;
fill: currentColor;
}

/* @end @a-tel-close */

/* @group @m-tel-action-body */

[class*="m-tel-action-body"] {
overflow-y: auto;
display: grid;
grid-template-columns: var(--tel-action-body-grid-template-columns);
grid-template-rows: var(--tel-action-body-grid-template-rows);
gap: var(--tel-action-body-gap);
padding: 1.5rem 1.5rem 2.25rem;
background-color: hsl(0deg 0% 100%);
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}

/* @end @m-tel-action-body */