@import '../definitions/variables';

.sidebar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	padding-bottom: env(safe-area-inset-bottom);

	z-index: 19;
	background: $background;
	border-top: 1px solid $background-box;

	transform: translate3d(0, 0, 0);
	transition: transform ease-out 0.3s;


	@include greater($size-l) {
		top: $sidebar-width;
		right: auto;
		bottom: 0;
		width: $sidebar-width;
		overflow: hidden;

		background: $background;
		border-top: none;
		border-right: 1px solid $background-box;

		transition: width 0.8s ease-in-out 0.25s, transform ease-out 0.3s;


		@media (hover: hover) {
			&:not(.sidebar--hidden):not(.sidebar--mini):hover {
				width: $sidebar-width * 3.5;
				transition: width 0.25s ease-out 2.4s, transform ease-out 0.3s;
			}
		}
	}

	&--hidden {
		transform: translate3d(0, 100px, 0);
		transition: transform ease-in 0.3s;

		@include greater($size-l) {
			transform: translate3d(-$sidebar-width, 0, 0);
			transition: width 0.8s ease-in-out 0.25s, transform ease-in 0.3s 0.3s;
		}
	}



	&__item {
		float: left;
		width: 20%;
		cursor: pointer;

		-webkit-tap-highlight-color: rgba(0,0,0,0);

		&--active {
			cursor: default;
		}

		&--settings-desktop {
			display: none;
			position: absolute;
			bottom: 0;
		}

		@include greater($size-l) {
			display: block;
			float: none;
			width: 100%;

			border-left: 4px solid transparent;
			border-top: 1px solid $background-box;
			border-bottom: 1px solid $background-box;

			& + & {
				border-top: none;
			}

			&--active {
				border-left-color: $primary-5;
			}

			&--settings-mobile {
				display: none;
			}
			&--settings-desktop {
				display: block;

				&:last-child {
					border-top: 1px solid $background-box;
				}
			}
		}


		&-link {
			display: block;
			text-decoration: none;
			padding: 10px;
			color: rgba($text, 0.6);
			cursor: inherit;

			@include greater($size-l) {
				width: $sidebar-width * 3;
				height: $sidebar-width;
				padding: 0;
				box-sizing: content-box;

				&:hover {
					color: lighten($background-footer, 10);
				}
				&:active {
					color: lighten($background-footer, 10);
				}
			}
		}

		&-icon {
			display: block;

			font-family: 'ubud';
			font-style: normal;
			font-weight: normal;
			speak: none;

			font-size: 1.6em;
			font-variant: normal;
			text-transform: none;
			text-align: center;

			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;

			&--add {
				color: $background;
				font-size: 1.8em;
				padding: 4px 3px 4px 5px;
			}

			@include greater($size-l) {
				float: left;
				width: $sidebar-width - 4px;
				font-size: 2.0em;
				line-height: $sidebar-width;
				padding-right: 4px;
			}
		}
		&--active &-icon:not(.sidebar__item-icon--add) {
			color: rgba($primary-5, 0.8);
		}

		&-name {
			display: none;
			float: left;
			white-space: nowrap;
			font-size: 1em;
			width: $sidebar-width * 2;
			line-height: $sidebar-width;
			opacity: 0.5;

			@include greater($size-l) {
				display: block;
			}
		}


		&--right {
			float: right;
		}

		&--add {
			position: absolute;
			left: 50%;
			bottom: calc(3px + env(safe-area-inset-bottom));
			width: 3.6em;
			height: 3.6em;
			margin-left: -1.6em;

			background: $primary-5;
			border-radius: 50%;

			@include greater($size-l) {
				display: none;
			}
		}
	}
}