.slider-nav-btn {
	$self: &;
	position: absolute;
	top: calc(50% - (54px / 2));
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	color: $color-green;
	border-radius: 50%;
	background-color: $color-white;
	box-shadow: 0px 8px 40px rgba(0, 0, 0, 0.08);
	transition:
		opacity 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
		visibility 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
		transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	z-index: 3;

	&:disabled {
		opacity: 0;
		visibility: hidden;
		transform: scale(0);

		&#{ $self }--prev {
			.slider-nav-btn__icon {
				transform: rotate(180deg) scale(0);
			}
		}
	}

	@include desktop {
		&:hover {
			transform: scale(1.2);

			.slider-nav-btn__icon {
				transform: scale(0.9);
			}

			&#{ $self }--prev {
				.slider-nav-btn__icon {
					transform: rotate(180deg) scale(0.9);
				}
			}
		}
	}

	@include mobile {
		display: none;
	}
}

.slider-nav-btn__icon {
	width: 24px;
	height: 24px;
	transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.slider-nav-btn--prev {
	left: calc(-54px / 2);

	.slider-nav-btn__icon {
		transform: rotate(180deg);
	}
}

.slider-nav-btn--next {
	right: calc(-54px / 2);
}