@use '../variables' as *;

.#{$prefix}nav-rail {
	flex-shrink: 0;
	position: relative;
	width: 73px;
	height: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;

	&--left {
		border-right-width: 1px;
		border-right-color: var(--#{$prefix}nav-rail-border-color);
		border-right-style: solid;
	}

	&--right {
		border-left-width: 1px;
		border-left-color: var(--#{$prefix}nav-rail-border-color);
		border-left-style: solid;
	}

	&__start-content,
	&__end-content {
		flex-shrink: 0;
	}

	&__start-content {
		padding-block: var(--#{$prefix}nav-rail-start-content-padding-y);
		padding-inline: var(--#{$prefix}nav-rail-start-content-padding-x);
		gap: var(--#{$prefix}nav-rail-start-content-gap);
	}

	&__end-content {
		padding-block: var(--#{$prefix}nav-rail-end-content-padding-y);
		padding-inline: var(--#{$prefix}nav-rail-end-content-padding-x);
		gap: var(--#{$prefix}nav-rail-end-content-gap);
	}

	&__content {
		flex-grow: 1;
		padding-block: var(--#{$prefix}nav-rail-content-padding-y);
		padding-inline: var(--#{$prefix}nav-rail-content-padding-x);
		gap: var(--#{$prefix}nav-rail-content-gap);
	}

	&__start-content,
	&__end-content,
	&__content {
		display: flex;
		flex-direction: column;
	}

	&-item {
		flex-shrink: 0;
		padding-block: var(--#{$prefix}nav-rail-item-padding-y);
		padding-inline: var(--#{$prefix}nav-rail-item-padding-x);
		position: relative;
		text-decoration: none;
		opacity: var(--#{$prefix}nav-rail-item-opacity);
		border-radius: var(--#{$prefix}nav-rail-item-border-radius);
		cursor: default;
		color: var(--#{$prefix}nav-rail-item-color);
		background-color: var(--#{$prefix}nav-rail-item-background);
		display: flex;
		user-select: none;

		&__indicator {
			position: absolute;
			top: 0;
			bottom: 0;
			z-index: 1;
			width: var(--#{$prefix}nav-rail-item-indicator-size);
			z-index: 1;
			background: var(--#{$prefix}nav-rail-item-indicator-color);
			transform: translateX(calc(var(--#{$prefix}nav-rail-item-indicator-size) * -1));
			transition:
				transform 0.125s cubic-bezier(0.17, 0.67, 0.55, 1.09),
				inset 0.125s cubic-bezier(0.17, 0.67, 0.55, 1.09);
		}

		&__content {
			flex-grow: 1;
			position: relative;
			padding-block: var(--#{$prefix}nav-rail-item-content-padding-y);
			padding-inline: var(--#{$prefix}nav-rail-item-content-padding-x);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: var(--#{$prefix}nav-rail-item-gap);
		}

		&__media {
			position: relative;
			outline-width: var(--#{$prefix}nav-rail-item-media-border-width);
			outline-style: var(--#{$prefix}nav-rail-item-media-border-style);
			outline-color: var(--#{$prefix}nav-rail-item-media-border-color);
			width: var(--#{$prefix}nav-rail-item-media-width);
			height: var(--#{$prefix}nav-rail-item-media-height);
			border-radius: var(--#{$prefix}nav-rail-item-media-border-radius);
			overflow: hidden;
			display: flex;
			justify-content: center;
			align-items: center;
			transition: transform 0.125s cubic-bezier(0.17, 0.67, 0.55, 1.09);
		}

		&__icon {
			padding-block: var(--#{$prefix}nav-rail-item-icon-padding-y);
			padding-inline: var(--#{$prefix}nav-rail-item-icon-padding-x);
			display: flex;
			justify-content: center;
			align-items: center;

			& .#{$prefix}icon {
				font-size: var(--#{$prefix}nav-rail-item-icon-font-size);
			}
		}

		&__label {
			position: absolute;
			bottom: calc((var(--#{$prefix}nav-rail-item-label-font-size) + var(--#{$prefix}nav-rail-item-gap, 0)) * -1);
			left: 50%;
			transform: translateX(-50%);
			font-size: var(--#{$prefix}nav-rail-item-label-font-size);
			font-weight: var(--#{$prefix}nav-rail-item-label-font-weight);
			line-height: var(--#{$prefix}nav-rail-item-label-line-height);
			width: 100%;
			text-align: center;
			overflow: hidden;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			transition: opacity 0.125s cubic-bezier(0.17, 0.67, 0.55, 1.09);
		}

		&--selected {
			color: var(--#{$prefix}_active-nav-rail-item-color);
		}

		&--selected &__media {
			outline-color: var(--#{$prefix}_active-nav-rail-item-media-border-color);
		}

		&--selected &__icon,
		&:hover &__icon {
			transform: scale(1.15);
		}

		&--selected &__indicator,
		&--selected:hover &__indicator {
			color: var(--#{$prefix}_active-nav-rail-item-indicator-color);
		}

		&--selected &__indicator,
		&:hover &__indicator {
			transform: translateX(0px);
		}
	}

	&--left &-item__indicator {
		left: -25%;
		border-radius: 0px var(--#{$prefix}nav-rail-item-indicator-border-radius)
			var(--#{$prefix}nav-rail-item-indicator-border-radius) 0px;
	}

	&--right &-item__indicator {
		right: -25%;
		border-radius: var(--#{$prefix}nav-rail-item-indicator-border-radius) 0px 0px
			var(--#{$prefix}nav-rail-item-indicator-border-radius);
	}

	&--left &-item--selected &-item__indicator,
	&--left &-item--selected:hover &-item__indicator {
		left: 0px;
	}

	&--right &-item--selected &-item__indicator,
	&--right &-item--selected:hover &-item__indicator {
		right: 0px;
	}
}