[data-modal] {
    position                    : fixed;
    top                         : 0%;
    left                        : 0%;
    z-index                     : 11000;
    display                     : none;
    justify-content             : center;
    align-items                 : center;
    width                       : 100%;
    height                      : 100%;
    background-color            : transparent;
    transition-property         : background-color;
    transition-duration         : 0.3s;
}

[data-modal][data-status~="opening"] {
    display                     : flex;
    background-color            : var(--black-39);
}

[data-modal][data-status~="active"] {
    display                     : flex;
    background-color            : var(--black-39);
}

[data-modal] .modal__container {
    position                    : relative;
    width                       : 80%;
    height                      : 80%;
    display                     : flex;
    flex-direction              : column;
    opacity                     : 0;
    background-color            : var(--gray-charcoal-100);
    border                      : 1px solid var(--white-18);
    border-radius               : 4px;
    padding-block               : 16px;
    padding-inline              : 16px;
    overflow                    : hidden;
    transition-property         : opacity;
    transition-duration         : 0.3s;
}

[data-modal][data-status~="opening"] .modal__container {
    opacity                     : 1;
}

[data-modal][data-status~="active"] .modal__container {
    opacity                     : 1;
}

[data-modal] .modal__header {
    font-size                   : 24px;
    font-weight                 : 500;
    margin-bottom               : 16px;
    border-bottom               : 1px solid var(--white-14);
    padding                     : 4px 0px 16px;
}

[data-modal] .modal__content {
    flex                        : 1;
    height                      : inherit;
}

[data-modal] .modal__download {
    position                    : absolute;
    top                         : 0%;
    left                        : 0px;
    background-color            : var(--black-39);
    display                     : none;
    justify-content             : center;
    align-items                 : center;
    width                       : 100%;
    height                      : 100%;
}

[data-modal][data-status~="download"] .modal__download {
    display                     : flex;
}

[data-modal] .download_spinner {
    
}

[data-modal] .download_spinner [data-icon] {
    --icon-size                 : 100px;
}

[data-modal] .modal__close.modal__top {
    position                    : absolute;
    top                         : 25px;
    right                       : 18px;
    z-index                     : 100;
    cursor                      : pointer;
}









#system_messages {
    position                    : fixed;
    top                         : 16px;
    right                       : 16px;
    z-index                     : 12000;
}

#system_messages [data-popup] {
    position                    : relative;
    width                       : 500px;
    background-color            : var(--gray-charcoal-100);
    margin-bottom               : 16px;
    border                      : 1px solid var(--white-100);
    box-shadow                  : 3px 3px 10px var(--gray-100);
    padding-bottom              : 4px;
    animation-name              : fade_in_down;
    animation-duration          : 0.5s;
}

#system_messages [data-popup][data-status~="info"] {
    background-color            : var(--vivid-sky-blue-100);
}

#system_messages [data-popup][data-status~="notice"] {
    color                       : var(--gunmetal-100);
    background-color            : var(--amber-100);
    border-color                : var(--gunmetal-100);
}

#system_messages [data-popup][data-status~="error"] {
    background-color            : var(--pink-raspberry-100);
}

#system_messages [data-popup][data-status~="success"] {
    background-color            : var(--green-lime-100);
}

#system_messages [data-popup].fade_out {
    animation-name              : fade_out_down;
    animation-duration          : 0.5s;
}

#system_messages .popup__box {
    display                     : flex;
    flex-direction              : row;
    align-items                 : center;
    gap                         : 20px;
    padding                     : 16px;
}

#system_messages .popup__icon {
    
}

#system_messages .popup__icon [data-icon] {
    --icon-size                 : 40px;
}

#system_messages [data-popup][data-status~="notice"] .popup__icon [data-icon] {
    background-color            : var(--gunmetal-100);
}

#system_messages .popup__body {
    display                     : flex;
    flex-direction              : column;
    gap                         : 4px;
}

#system_messages .popup__text {
    font-size                   : 20px;
}

#system_messages .popup__content {
    font-size                   : 14px;
}

#system_messages .popup__progress_bar {
    position                    : absolute;
    bottom                      : 0%;
    left                        : 0%;
    z-index                     : 100;
    width                       : 0%;
    height                      : 4px;
    background-color            : var(--white-100);
    animation-name              : progressing;
    animation-delay             : 0.5s;
    animation-duration          : 3.5s;
    animation-timing-function   : linear;
}