#smsPopupDialog {
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    margin: unset;
    border: unset;
    background: var(--section-padding-bg-color);
    width: 100%;
    height: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    box-shadow: none;
    max-height: unset;
    position: fixed;
    transform: translateX(100%);
    transition: transform .5s, opacity .1s, box-shadow 1s;
    overflow: auto;
    border-radius: 1px;

    & .modal-header {
        & .x {
            --_outline-width: calc(var(--modal-padding) / 2);
        }
    }

    & .modal-content
    {
        margin-top: 0;
    }

    @media (width <= 750px) {
        top: 0;
        right: 0;
        margin: auto;
    }

    &[open] {
        transform: translateX(0);
        box-shadow: var(--box-shadow-1);
    }

    & textarea 
    {
        resize: none;
        padding: var(--padding10);
        height: 10rem;

        &::placeholder
        {
            font-weight: normal;
            opacity: 0.5;
        }
    }

    & .modal-section.message {
        flex: 1;
    }

    &:not(.successfully, .failed) .modal-info,
    &.successfully .modal-info .error,
    &.successfully :is(.modal-content, .modal-footer),
    &.failed .modal-info .success {
        display: none;
    }

    &.successfully .modal-info .success 
    {
        & .info
        {
            display: flex;
            align-items: center;
            padding: var(--modal-padding);
            gap: var(--gap10);
            color: var(--green);
            font-weight: 500;
            text-wrap: pretty;
        }

        & .buttons {
            text-align: center;
        }

        & img 
        {
            filter: invert(19%) sepia(95%) saturate(5561%) hue-rotate(114deg) brightness(99%) contrast(103%);
            height: calc(2 * var(--control-height));
        }
    }
}