$z-index: 9998 !default;
$backdrop-background-color: rgb(0 0 0 / 50%);
$inner-padding: 1rem;
$heading-font-family: 'Roboto', sans-serif;
$heading-font-size: 2rem;
$heading-border-color: #ddd;
$heading-line-height: 1.5rem;
$heading-padding: 1.5rem;
$heading-margin: 0;
$content-padding: 0 0 1rem 0;
$items-background-color: #fff;
$button-background-color: #fff;

@mixin items-border-radius {
	border-radius: 1.5rem;
}

@mixin button-border-radius {
	border-radius: 1.5rem;
}

.fb-theme-layout-phone-menu {
	&__container {
		position: relative;
	}

	&__inner {
		padding: $inner-padding;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: ($z-index + 1);
		width: 100%;
		transition: all 0.25s ease-in-out;
	}

	&__content {
		background: $items-background-color;
		box-sizing: border-box;
		padding: $content-padding;

		@include items-border-radius;
	}

	&__heading {
		font-family: $heading-font-family;
		font-size: $heading-font-size;
		font-weight: normal;
		border-bottom: 1px solid $heading-border-color;
		line-height: $heading-line-height;
		padding: $heading-padding;
		margin: $heading-margin;
		text-align: center;
	}

	&__footer {
		margin-top: $inner-padding;
	}

	&__backdrop {
		z-index: $z-index;
		position: fixed;
		inset: 0;
		background-color: $backdrop-background-color;
	}
}

.fb-theme-layout-phone-menu-backdrop-enter-active,
.fb-theme-layout-phone-menu-backdrop-leave-active {
	transition: all 0.25s;
}

.fb-theme-layout-phone-menu-backdrop-enter-from,
.fb-theme-layout-phone-menu-backdrop-leave-to {
	opacity: 0;
}

.fb-theme-layout-phone-menu-content-enter-from,
.fb-theme-layout-phone-menu-content-leave-active {
	bottom: -100%;
}