/* #region (mobile) */

.popup {
	width: calc(100% - calc(var(--fontSize) * 2));
    position: fixed;
    z-index: 1;
    bottom: -100%;
    left: var(--fontSize);
    filter: drop-shadow(0 0 1rem rgba(0, 0, 0, 0.25));
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    transition: var(--slowTransition);
}

.popup.--is-opened {
    bottom: 0;
}

.btn.close-btn {
    position: absolute;
    top: .5rem;
    right: .5rem;
    width: calc(var(--fontSize) * 1.5);
    height: calc(var(--fontSize) * 1.5);
    padding: unset;
    border-radius: unset;
    border: unset;
    background: unset;
}

.btn.close-btn:before, .btn.close-btn:after {
    content: '';
    position: absolute;
    width: 100%;
    border-top: 3px solid var(--fillFont);
    border-radius: 3px;
    transform: rotate(45deg);
    transition: var(--transition);
}

.btn.close-btn:after {
	transform: rotate(-45deg);
}

.btn.close-btn:hover:after, .btn.close-btn:hover:before {
    border-color: red;
}

/* #endregion */