/* Arrow tabs */
.arrow-tabs .tabsnew {
	--main-color: #000;
	--hover-color: #888;
	--inactive-color: #666;

	ul.nav {
		margin: 0px;
		gap: 10px;

		&::before,
		&::after {
			display: none;
		}

		& > li {
			display: none;
			align-self: center;
			margin: 0px;

			a {
				display: block;
				width: 25px;
				aspect-ratio: 1 / 1;
				font-size: 0px;
				background-color: unset !important;
				background-size: contain;
				background-repeat: none;
				border: 2px solid var(--main-color) !important;
				border-radius: 100%;

				&:not(:first-child):not(:last-child) {
					&:hover, &:focus, &:focus-within {
						background-color: var(--hover-color) !important;
						border-color: var(--hover-color) !important;
					}
				}
			}

			&.active:is(:first-child),
			&.active:is(:last-child),
			&:has(+ .active),
			&.active + li {
				display: block;
			}

			&.active:is(:first-child),
			&.active:is(:last-child) {
				filter: brightness(1.5);
			}

			/* Left icon */
			&.active:first-child,
			&:has(+ .active) {
				a {
					background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.7071 7.70711C11.0976 7.31658 11.0976 6.68342 10.7071 6.29289C10.3166 5.90237 9.68342 5.90237 9.29289 6.29289L4.29289 11.2929C3.90237 11.6834 3.90237 12.3166 4.29289 12.7071L9.29289 17.7071C9.68342 18.0976 10.3166 18.0976 10.7071 17.7071C11.0976 17.3166 11.0976 16.6834 10.7071 16.2929L7.41422 13L19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11L7.41421 11L10.7071 7.70711Z' fill='%23000'/%3E%3C/svg%3E");
				}
			}

			&.active:first-child a {
				background-color: unset !important;
				background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.7071 7.70711C11.0976 7.31658 11.0976 6.68342 10.7071 6.29289C10.3166 5.90237 9.68342 5.90237 9.29289 6.29289L4.29289 11.2929C3.90237 11.6834 3.90237 12.3166 4.29289 12.7071L9.29289 17.7071C9.68342 18.0976 10.3166 18.0976 10.7071 17.7071C11.0976 17.3166 11.0976 16.6834 10.7071 16.2929L7.41422 13L19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11L7.41421 11L10.7071 7.70711Z' fill='%23666'/%3E%3C/svg%3E");
				border-color: var(--inactive-color) !important;
			}

			/* Right icon */
			&.active:last-child,
			&.active + li {
				a {
					width: 45px;
					background-color: var(--main-color) !important;
					background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.2929 7.70711C12.9024 7.31658 12.9024 6.68342 13.2929 6.29289C13.6834 5.90237 14.3166 5.90237 14.7071 6.29289L19.7071 11.2929C20.0976 11.6834 20.0976 12.3166 19.7071 12.7071L14.7071 17.7071C14.3166 18.0976 13.6834 18.0976 13.2929 17.7071C12.9024 17.3166 12.9024 16.6834 13.2929 16.2929L16.5858 13L5 13C4.44771 13 4 12.5523 4 12C4 11.4477 4.44772 11 5 11L16.5858 11L13.2929 7.70711Z' fill='%23fff'/%3E%3C/svg%3E");
				}
			}

			&.active:last-child a {
				background-color: unset !important;
				background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.2929 7.70711C12.9024 7.31658 12.9024 6.68342 13.2929 6.29289C13.6834 5.90237 14.3166 5.90237 14.7071 6.29289L19.7071 11.2929C20.0976 11.6834 20.0976 12.3166 19.7071 12.7071L14.7071 17.7071C14.3166 18.0976 13.6834 18.0976 13.2929 17.7071C12.9024 17.3166 12.9024 16.6834 13.2929 16.2929L16.5858 13L5 13C4.44771 13 4 12.5523 4 12C4 11.4477 4.44772 11 5 11L16.5858 11L13.2929 7.70711Z' fill='%23666'/%3E%3C/svg%3E");
				border-color: var(--inactive-color) !important;
			}
		}

		/* Pagination info */
		& + span {
			display: block;
			width: 66px;
			text-align: center;
			font-weight: bold;
		}
	}
}