/* @group @variables */

:root {
--modal-fade-transition: opacity .3s 0s cubic-bezier(.6, .5, .5, .75), visibility .3s 0s cubic-bezier(.6, .5, .5, .75);
--backdrop-filter: blur(.125rem);
}

[class*="m-tel-action-dialog"] {
--tel-action-dialog-max-height: 100%;
--head-2-font-weight: 600;

--btn-min-width: 15rem;
--btn-text-align: center;
}

@media (width >= 48em) { /* 768px -> * */

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

}

/* @end @variables */

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

[class*="m-tel-action-dialog"] {
display: grid;
place-items: center;
margin: auto;
padding: 1.5rem 1.5rem 2.625rem;
}

[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: .75rem;
background-color: var(--color-white);
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"] {
display: grid;
align-content: center;
align-self: center;
grid-auto-flow: row;
gap: 1.5rem;
}

[class*="m-tel-action-dialog"] h2 {
font-size: 1.25rem;
line-height: 1.2;
text-align: center;
color: hsl(228, 68%, 22%);
}

[class*="a-tel-action-support"] {
padding-bottom: 1.5rem;
border-bottom: 1px solid hsl(220deg 5% 85%);
}

[class*="a-tel-action-note"] {
font-size: .875rem;
line-height: 1.42857143;
text-align: center;
}

[class*="a-tel-action-footer"] {
display: grid;
justify-content: center;
}

[class*="a-support-tel-link"] {
display: grid;
justify-content: center;
}

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

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

/* @group @variables */

[class*="a-tel-overlay"] {
--tel-overlay-opacity: 0;
--tel-overlay-pointer-events: none;
}

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

/* @end @variables */

/* @group @a-tel-overlay */

[class*="a-tel-overlay"] {
position: fixed;
z-index: 100;
inset: 0;
opacity: var(--tel-overlay-opacity);
background-color: hsl(228deg 68% 22.5% / 90%);
pointer-events: var(--tel-overlay-pointer-events);
}

/* @end @a-tel-overlay */

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

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

[class*="a-tel-close"] {
display: grid;
place-items: center;
width: 3rem;
height: 3rem;
margin-left: auto;
background-color: var(--color-white);
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: var(--color-white);
}

[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: var(--color-white);
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}

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

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

/* @group @variables */

[class*="m-tel-floating"] {
--tel-floating-opacity: 0;
}

[class*="is-watch-nav"] [class*="m-tel-floating"] {
--tel-floating-opacity: 1;
}

[class*="m-tel-floating"] p+p {
--font-family: var(--font-family-heading);
--font-size: 1.25rem;
--font-weight: 600;
}

/* @end @variables */

/* @group @m-tel-floating */

[class*="m-tel-floating"] {
box-sizing: border-box;
position: fixed;
z-index: 10;
bottom: 2.25rem;
right: 0;
display: grid;
grid-auto-flow: row;
gap: .75rem;
min-width: 15rem;
padding: 1.125rem;
background-color: var(--color-white);
border: 1px solid var(--border-color);
box-shadow: 2px 2px .25rem var(--border-color);
opacity: var(--tel-floating-opacity);
text-align: center;
transition: var(--opacity-transition);
}

/* @end @m-tel-floating */