/* @group @dialog */

dialog {
box-sizing: border-box;
position: fixed;
overflow: hidden;
visibility: hidden;
z-index: 10001;
top: 50%;
display: grid;
grid-template-rows: auto 1fr;
min-width: 18rem;
min-height: 12rem;
margin: auto;
padding: 0;
background: var(--neutral-colors-100);
border: 0;
border-radius: var(--border-radius);
transform:scale(0.1) translate(0, -50%);
transition: var(--transition-default);
}

dialog[open] {
visibility: visible;
transform: scale(1) translate(0, -50%);
}

dialog::backdrop {
background-color: hsla(220, 2.5%, 10%, .875);
transition: inherit;
}

/* @end @dialog */

/* @group @m-dialog-body */

.m-dialog-body {
display: flex;
}

@supports (display:contents){
.m-dialog-body {display: contents;}
}

/* @end @m-dialog-body */

/* @group @m-dialog-inner */

.m-dialog-inner {
display: grid;
width: 100%;
grid-template-rows: 1fr auto;
padding: var(--spacing-medium);
}

/* @end @m-dialog-inner */

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

/* @group @m-dialog-primary */

.m-dialog-primary {
max-width: 64rem;
height: 80%;
max-height: calc(100vh - 6rem);
}

.m-dialog-body-primary {
box-sizing: border-box;
overflow: hidden;
overflow-y: auto;
flex: 1;
height: calc(100% - 1px);
padding: 1.125rem 1.125rem .75rem 1.125rem;
}

/* @end @m-dialog-primary */

/* @group @m-dialog-secondary */

.m-dialog-secondary {
width: 90vw;
max-width: 30rem;
height: auto;
max-height: calc(100vh - 6rem);
}

/* @end @m-dialog-secondary */

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

/* @group @m-dialog-header-primary */

.m-dialog-header-primary {
background: var(--neutral-colors-100);
box-shadow: 0 .125rem 0 var(--brand-primary-color);
}

.a-dialog-title {
align-self: center;
margin-bottom: 0;
padding: var(--spacing-small) var(--spacing-medium);
font-size: var(--font-size-medium);
line-height: var(--lineheight-medium);
}

.a-dialog-header-close {
display: block;
display: flex;
justify-content: center;
align-items: center;
width: var(--line-clamp-3);
height: var(--line-clamp-2-25);
background-size: var(--spacing-paragraph) auto;
transition: var(--transition-default);
}

.a-dialog-header-close:hover,
.a-dialog-header-close:focus {
background-color: var(--gray-colors-95)
}

/* @end @m-dialog-header-primary */

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

/* @group @m-dialog-footer-primary */

.m-dialog-footer-primary {
--grid-columns: repeat(2, 1fr);
--column-gap: var(--spacing-medium);
}

/* @end @m-dialog-footer-primary */

/* @group @m-dialog-footer-primary */

.m-dialog-footer-primary {
align-items: center;
margin-right: auto;
}

/* @end @m-dialog-footer-primary */