// Action Sheets
.offcanvas{
    background-color: var(--body-bg);
    
	&.offcanvas-bottom{
        border-radius: 15px 15px 0 0;
        height: unset;
        border-top: 0;
    }
    &.offcanvas-top{
        border-radius: 0 0 10px 10px;
        height: unset;
        border-bottom: 0;
        bottom: auto;
    }
	&.offcanvas-end{
		width: 100%;
		border-left: 0;	
	}
    .offcanvas-header{
        padding: 15px 15px;
        border-bottom: 1px solid var(--border-color);
		
        .offcanvas-title{
            line-height: 1.2;
			font-weight: 500;
        }
        .btn-close{
			background: none;
			opacity: 1;
			text-align: center;
			display: inline-block;
			line-height: 25px;
			font-size: 28px;
        }
    }
    .offcanvas-backdrop{
        &.show{
            opacity: 0.3 !important;
        }
    }
	.offcanvas-body{
		max-height: 100vh;
		
		&.fixed{
			border-radius: 0;
			margin-bottom: 200px;
		}
		.btn-close{
			width: auto;
			height: auto;
			line-height: initial;
		}
	}
}
.btn-close{
	&:focus{
		box-shadow: unset;
	}
}

// Action Modal
.modal.fade .modal-dialog{
    transition: transform 0.3s ease-out;
    transform: translate(0, 50px);
}
.modal.fade.show .modal-dialog{
    transform: none;
}
.modal.fade.show.modal-static .modal-dialog {
    transform: scale(1.02);
}

.top-right{
    position: absolute;
    top: 15px;
    right: 15px;
}

.btn-close{
	background: none;
	opacity: 1;
	text-align: center;
	line-height: 25px;
	font-size: 18px;
}


// PWA Offcanvas
.pwa-offcanvas{
	text-align: center;
	
	.title{
		margin-bottom: 10px;
	}
	.logo{
		width: 150px;
		margin: 0 auto 15px;
		display: block;
		&.light{
			display: none;
		}
	}
	p{
		margin-bottom: 25px;
		color: #4b4b4b;
		line-height: 1.6;
	}
	&.show{
		visibility: visible;
	}
	.btn{
		border-radius: 6px;
		padding: 12px 18px!important;
	}
}
.pwa-backdrop{
	visibility: hidden;
	
	&.show{
		visibility: visible;
		transition: opacity 0.15s linear;
	}
}