/*
* Amazium (http://www.amazium.co.uk)
* Copyright 2010 - 2019, Mike Ballan
* Licensed under MIT (https://github.com/OwlyStuff/Amazium/blob/master/LICENSE)
*/

/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Font-face setup
- Fonts overrides
- Navigation
- Color examples setup
- Media Queries
*/

/***********************************************
Mobile First - This applies from 0px to 749px
***********************************************/

/***** Dialog *****/
.dialog                                         { margin:0; padding:0; width:100%; height:100%; flex-direction:column; align-items:center; justify-content:center; background-color:rgba(15, 22, 42, .80); position:fixed; top:0; right:0; bottom:0; left:0; z-index:100; }
.dialog[open]                                   { display:flex; }

.dialog >:first-child                           { border-radius:5px 5px 0 0; }
.dialog >:last-child                            { border-radius:0 0 5px 5px; }
.dialog >:only-child                            { border-radius:5px; }

.btn--dialog                                    { padding:0; min-width:16px; min-height:16px; background-color:transparent; color:var(--color-mist); position:absolute; top:25px; right:28px; left:auto; z-index:10; }
.btn--dialog:hover                              { background-color:transparent; color:var(--color-black); }
.btn--dialog .icon                              { width:16px; height:16px; }

.dialog__header                                 { padding:22px 30px; width:calc(100vw - 40px); display:flex; align-items:center; gap:12px; font-size:1.6rem; line-height:2rem; font-weight:bold; color:var(--color-black); background-color:var(--color-snow); position:relative; border-bottom:1px solid var(--color-mist); }

.dialog__body                                   { padding:30px; width:calc(100vw - 40px); max-height:calc(100vh - 200px); background-color:var(--color-snow); overflow-y:auto; position:relative; }

.dialog__footer                                 { padding:20px 30px; width:calc(100vw - 40px); display:flex; justify-content:flex-end; border-top:1px solid #E8ECF5; background-color:var(--color-snow); }

.dialog--warning .dialog__header                { background-color:var(--color-warning); font-size:1.6rem; line-height:2rem; font-weight:bold; color:var(--color-black); }

.dialog--christmas                              { color:var(--color-snow); }
.dialog--christmas .dialog__body                { padding:110px 60px; display:flex; flex-direction:column; gap:20px; align-items: center; text-align: center; font-weight: bold; background-image:url(../images/bg-christmas-01.jpg); background-position:center center; background-size:cover; }
.dialog--christmas h2                           { color:inherit; }
.dialog--christmas .btn--dialog                 { padding:12px; background-color:var(--color-snow); color:var(--color-black); }

.dialog--easter                                 { color:var(--color-black); }
.dialog--easter .dialog__body                   { padding:110px 60px; display:flex; flex-direction:column; gap:20px; align-items: center; text-align: center; font-weight: bold; background-image:url(../images/bg-easter-01.jpg); background-position:center center; background-size:cover; }
.dialog--easter h2                              { color:inherit; }
.dialog--easter .btn--dialog                    { padding:12px; background-color:var(--color-snow); color:var(--color-black); }

.dialog--summer                                 { color:var(--color-black); }
.dialog--summer .dialog__body                   { padding:110px 60px; display:flex; aspect-ratio:1 / 1;  flex-direction:column; gap:20px; align-items: center; text-align: center; font-weight: bold; background-image:url(../images/bg-summer-01.png); background-position:center center; background-size:cover; }
.dialog--summer h2                              { color:inherit; }
.dialog--summer .btn--dialog                    { padding:12px; background-color:var(--color-snow); color:var(--color-black); }


/***********************************************
Tablet - This applies from 768px onwards
***********************************************/
@media (min-width:768px) {
  .dialog__header,
  .dialog__body,
  .dialog__footer                               { width:600px; }
}