<div class="o-tabs jq_tabs">
	<div class="o-tabs__nav jq_tabs_nav">
		<ul class="o-tabs__nav__list jq_tabs_nav_list">
			<li class="o-tabs__nav__item jq_tabs_nav_tab">
				<a href="#tab-example-01" class="o-tabs__tab a-link on jq_tabs_nav_button">Lorem ipsum dolor sit</a>
			</li>
			<li class="o-tabs__nav__item jq_tabs_nav_tab">
				<a href="#tab-example-02" class="o-tabs__tab a-link jq_tabs_nav_button">Neque porro quisquam</a>
			</li>
			<li class="o-tabs__nav__item jq_tabs_nav_tab">
				<a href="#tab-example-03" class="o-tabs__tab a-link jq_tabs_nav_button">In enim a arcu</a>
			</li>
			<li class="o-tabs__nav__item jq_tabs_nav_tab">
				<a href="#tab-example-04" class="o-tabs__tab a-link jq_tabs_nav_button">Nam sed tellus id magna</a>
			</li>
		</ul>
		<button class="o-tabs__nav__arrow o-tabs__nav__prev icon-chevron-left jq_tabs_nav_arrow"></button>
		<button class="o-tabs__nav__arrow o-tabs__nav__next icon-chevron-right jq_tabs_nav_arrow"></button>
	</div>
	<div class="o-tabs__panels">
		<div id="tab-example-01" class="o-tabs__panel jq_tabs_panel" data-title="Lorem ipsum dolor sit">
			<div class="o-tabs__panel__inner o-wysiwyg">
				<div class="row">
					<div class="col-lg-12">
						<p>Proin gravida dolor sit amet lacus accumsan et viverra justo commodoProin gravida dolor sit amet lacus accumsan et viverra justo commodoProin gravida dolor sit amet lacus. Acumsan et viverra justo commodoProin gravida dolor sit amet lacus accumsan et viverra justo commodoProin gravida gravida dolor sit amet lacus accumsan et viverra justo commodo msan et viverra justo commodo Proin gravida dolor sit amet lacus accumsan et viverra justo commodo</p>

						<p>Nam quis nulla. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Sed convallis magna eu sem. Duis viverra diam non justo. Quisque porta. Nam sed tellus id magna elementum tincidunt. Mauris tincidunt sem sed arcu. Aliquam in lorem sit amet leo accumsan lacinia. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo.</p>
					</div>
					<div class="col-lg-12">
						<img src="https://placehold.it/545x343/" width="545" height="343" loading="lazy" alt="tab01 thumb">
					</div>
				</div>
			</div>
		</div>
		<div id="tab-example-02" class="o-tabs__panel jq_tabs_panel" data-title="Neque porro quisquam">
			<div class="o-tabs__panel__inner o-wysiwyg">
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis gravida nulla. Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante. Nulla est. Phasellus faucibus molestie nisl. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Et harum quidem rerum facilis est et expedita distinctio. Pellentesque ipsum. Aliquam ante. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aenean vel massa quis mauris vehicula lacinia. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Etiam dictum tincidunt diam. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Nullam rhoncus aliquam metus. Nullam dapibus fermentum ipsum. Proin in tellus sit amet nibh dignissim sagittis. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat.</p>

				<p>Maecenas libero. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus. Donec iaculis gravida nulla. Maecenas sollicitudin. Curabitur sagittis hendrerit ante. Suspendisse nisl. Maecenas aliquet accumsan leo. Mauris metus. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Phasellus et lorem id felis nonummy placerat. Integer in sapien. Duis condimentum augue id magna semper rutrum. Vivamus ac leo pretium faucibus. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Duis condimentum augue id magna semper rutrum. Aenean placerat. Aliquam erat volutpat. Fusce nibh.</p>
			</div>
		</div>
		<div id="tab-example-03" class="o-tabs__panel jq_tabs_panel" data-title="In enim a arcu">
			<div class="o-tabs__panel__inner o-wysiwyg">
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis gravida nulla. Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante. Nulla est. Phasellus faucibus molestie nisl. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Et harum quidem rerum facilis est et expedita distinctio. Pellentesque ipsum. Aliquam ante. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aenean vel massa quis mauris vehicula lacinia. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Etiam dictum tincidunt diam. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Nullam rhoncus aliquam metus. Nullam dapibus fermentum ipsum. Proin in tellus sit amet nibh dignissim sagittis. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat.</p>
			</div>
		</div>
		<div id="tab-example-04" class="o-tabs__panel jq_tabs_panel" data-title="Nam sed tellus id magna">
			<div class="o-tabs__panel__inner o-wysiwyg">
				<p>Maecenas libero. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus. Donec iaculis gravida nulla. Maecenas sollicitudin. Curabitur sagittis hendrerit ante. Suspendisse nisl. Maecenas aliquet accumsan leo. Mauris metus. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Phasellus et lorem id felis nonummy placerat. Integer in sapien. Duis condimentum augue id magna semper rutrum. Vivamus ac leo pretium faucibus. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Duis condimentum augue id magna semper rutrum. Aenean placerat. Aliquam erat volutpat. Fusce nibh.</p>
			</div>
		</div>
	</div>
</div>

.o-tabs {

    $self: &;
    $height: 48px;
    $bottom: 20px;
    $spacing: 30px;

    margin-bottom: space(3);
    margin-top: space(3);
    position: relative;

    &:first-child {

        margin-top: 0;

    }

    &:last-child {

        margin-bottom: 0;

    }

    &__nav {

        height: $height;
        margin: 0 auto;
        overflow: hidden;
        position: relative;

        &__list {

            -webkit-overflow-scrolling: touch; // sass-lint:disable-line no-vendor-prefixes
            font-size: 0;
            line-height: 1;
            margin: 0 $spacing / -2 $bottom * -1 !important; // sass-lint:disable-line no-important
            overflow-x: auto;
            overflow-y: hidden;
            position: relative;
            scroll-behavior: smooth;
            text-align: center;
            white-space: nowrap;

        }

        &__item {

            display: inline-block;
            margin: 0 0 $bottom + 1px;
            padding: 0 $spacing / 2;

            &:focus {

                outline: none;

            }

        }

        &__arrow { // responzive arrows to scroll tabs

            border: 0;
            bottom: 1px;
            cursor: pointer;
            display: none;
            font-size: $height / 2.2;
            justify-content: center;
            position: absolute;
            top: 0;

            &:focus {

                outline: none;

            }

            &:after {

                bottom: -1px;
                content: '';
                height: 1px;
                left: 0;
                position: absolute;
                width: 100%;

            }

        }

        &__prev {

            background: linear-gradient(to right, color('white') 20%, transparentize(color('white'), 1) 100%);
            left: 0;
            padding-right: 20px;

            &:after {

                background: linear-gradient(to right, color('gray') 20%, transparentize(color('gray'), 1) 100%);

            }

        }

        &__next {

            background: linear-gradient(to left, color('white') 20%, transparentize(color('white'), 1) 100%);
            padding-left: 20px;
            right: 0;

            &:after {

                background: linear-gradient(to left, color('gray') 20%, transparentize(color('gray'), 1) 100%);

            }

        }

    }

    &__tab {

        @include font-size(normal);
        @include text-underline(none);
        cursor: pointer;
        display: inline-block;
        height: $height;
        padding: space(1);
        position: relative;
        transition: color $base-transition;

        &:after { // tab indicator

            background: color('black');
            bottom: 0;
            content: '';
            height: 1px;
            left: 50%;
            position: absolute;
            transform: translateX(-50%);
            transition: width $base-transition;
            width: 0;

        }

        &.on,
        &:focus {

            color: color('black');

        }

        &.on {

            &:after {

                width: 100%;

            }

        }

    }

    &__panels {

        box-shadow: 0 -1px 0 color('gray'); // border-top

    }

    &__panel {

        display: none;
        text-align: left;

        &:first-child {

            display: block;

        }

        &__inner {

            padding-top: space(2);

            @media(min-width: breakpoint-min(md)) {

                padding-top: space(3);

            }

        }

    }

    &--left {

        #{$self}__nav {

            margin-left: 0;

            &__list {

                text-align: left;

            }

        }

    }

    @media print {

        &__nav {

            display: none;

        }

        &__panels {

            box-shadow: none;

        }

        &__panel {

            display: block;
            text-align: left;

            &:before {

                @include font-size(normal);
                border-bottom: 1px solid color('brand-1');
                color: color('brand-1');
                content: attr(data-title);
                display: inline-block;
                line-height: line-height(fix-medium);
                margin: space(3) 0 -1px;
                padding: space(1);

            }

            &:first-child {

                &:before {

                    margin-top: 0;

                }

            }

            &__inner {

                border-top: 1px solid color('gray');

            }

        }

    }

}

import $ from 'jquery';

import Polyfills from 'js-src/common/polyfills';

export default class Tabs {
	constructor() {
		if (this.test()) {
			Polyfills.io(this.init());
		}
	}

	test() {
		return $('.jq_tabs').length ? true : false;
	}

	init() {
		$('.jq_tabs').each((tabsIndex, tabsElement) => {
			var $el = {
				container: $(tabsElement),
				nav: $('.jq_tabs_nav', tabsElement),
				list: $('.jq_tabs_nav_list', tabsElement),
				tabs: $('.jq_tabs_nav_tab', tabsElement),
				buttons: $('.jq_tabs_nav_button', tabsElement),
				arrows: $('.jq_tabs_nav_arrow', tabsElement),
				panels: $('.jq_tabs_panel', tabsElement)
			};

			var navigationPosition = 0;

			var navigationTotal = $el.tabs.length - 1;

			var navigationViewport = new IntersectionObserver((tabs) => {
				$.each(tabs, (i, tab) => {
					if (tab.isIntersecting) {
						navigationPosition = $(tab.target).index();
					}
				});
			}, {
				root: $el.list[0],
				rootMargin: '0% -70% 0% -10%',
				threshold: 0
			});

			$el.tabs.each(function() {
				navigationViewport.observe(this);
			});

			$(window).on('load resize', () => {
				this.initScroll($el.tabs);

				this.toggleArrows($el.list, $el.arrows);
			});

			$el.list.on('scroll', (event) => {
				this.toggleArrows($(event.target), $el.arrows);
			});

			$el.arrows.on('click', (event) => {
				let direction = $(event.target).index();

				if (direction === 1) { // prev
					navigationPosition--;
					if (navigationPosition < 0) {
						navigationPosition = 0;
					}
				} else if (direction === 2) { // next
					navigationPosition++;
					if (navigationPosition > navigationTotal) {
						navigationPosition = navigationTotal;
					}
				}

				var scrollTo = $el.tabs.eq(navigationPosition).data('position-left');

				$el.list.scrollLeft(scrollTo);
			});

			$el.buttons.on('click', function(e) {
				e.preventDefault();

				if ($(this).hasClass('on')) {
					return false;
				}

				var index = $(this).attr('href');

				var $tab = $(this).parent();

				if ($el.list[0].offsetWidth + $el.list.scrollLeft() < $el.list[0].scrollWidth) {
					navigationPosition = $tab.index();
				}

				$el.buttons.not(this).removeClass('on');

				$(this).addClass('on');

				if ($tab.data('position-left') < $el.list.scrollLeft() ||
					($el.list[0].offsetWidth + $el.list.scrollLeft() - 80) <
					($tab.data('position-left') + $tab.outerWidth())) {
					$el.list.scrollLeft($tab.data('position-left'));
				}

				$el.panels.filter(':visible').slideUp(400, () => {
					$el.panels.filter(index).slideDown(400);
				});
			});
		});
	}

	initScroll($tabs) {
		var totalWidth = 0;

		$tabs.each((index, tab) => {
			$(tab).data('position-left', totalWidth - (index !== 0 ? 40 : 0));

			totalWidth += $(tab).outerWidth();
		});
	}

	toggleArrows($menu, $arrows) {
		var menuWidth = $menu[0].offsetWidth;
		var scrollWidth = $menu[0].scrollWidth;
		var scrollPosition = $menu.scrollLeft();

		if (menuWidth < scrollWidth) {
			if (scrollPosition <= 40) {
				$arrows.eq(0).filter(':visible').fadeOut();
				$arrows.eq(1).filter(':hidden').fadeIn();
			} else if (scrollPosition > 40 && scrollPosition <= scrollWidth - menuWidth - 30) {
				$arrows.filter(':hidden').fadeIn();
			} else {
				$arrows.eq(0).filter(':hidden').fadeIn();
				$arrows.eq(1).filter(':visible').fadeOut();
			}
		} else {
			$arrows.fadeOut();
		}
	}
}

$(() => new Tabs);