Tab Wrapper

{%
    set classes = [
      'paragraph',
      'paragraph--type--' ~ paragraph.bundle|clean_class,
      view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
    ]
  %}
{% block paragraph %}

	<div class="tabs">
		{% if paragraph.field_tab_layout.value == 0 %}
			<div class="grid__wrapper grid--row-1">
				<div class="grid grid--full grid--se-1-3 grid--as-top ta--left">
					<div class="grid__content">
					{% endif %}

					<div class="tab__wrapper {% if paragraph.field_tab_layout.value == 0 %}tab__wrapper--vertical{% endif %}">
						{% for key, item in content.field_paragraph_reference if key|first != '#'%}
							<a class="tab {% if paragraph.field_tab_style.value == 0 %}tab__button{% else %}tab__text{% endif %}" href="#{{ content.field_paragraph_reference[key]['#paragraph'].field_title.value|replace({' ': '', '&': ''})|lower|striptags }}">{{ content.field_paragraph_reference[key]['#paragraph'].field_title.value|raw }}</a>
						{% endfor %}
					</div>

					{% if paragraph.field_tab_layout.value == 0 %}
					</div>
				</div>
			{% endif %}

			{% if paragraph.field_tab_layout.value == 0 %}
				<div class="grid grid--full grid--se-4-13 grid--as-top ta--left">
					<div class="grid__content">
					{% endif %}
					<div class="tab__content-wrapper">
						{% for key, item in content.field_paragraph_reference if key|first != '#'%}
							<div
								id="{{ content.field_paragraph_reference[key]['#paragraph'].field_title.value|replace({' ': '', '&': ''})|lower|striptags }}" class="tab__content">

								{# {{ drupal_entity('paragraph', content.field_paragraph_reference[key]['#paragraph'].field_paragraph_reference.target_id) }} #}

								{% for key, item in content.field_paragraph_reference[key]['#paragraph'].field_paragraph_reference %}
									{{ drupal_entity('paragraph', item.target_id) }}

								{% endfor %}
							</div>
						{% endfor %}
					</div>
				</div>

				{% if paragraph.field_tab_layout.value == 0 %}
				</div>
			</div>
		</div>
	{% endif %}
	{# <p class"3"> {{ content.field_paragraph_reference[key]['#paragraph'].field_title.value }}</p> #}

{% endblock paragraph %}

@import '../abstracts/_mixins';

.tab {
    &__button {
        width: 100%;
        padding: 1.2rem 1.2rem 2.4rem;
        font-size: var(--font-size-2);
        font-weight: var(--bold);
        line-height: var(--line-height-2);
        text-transform: uppercase;
        flex-grow: 1;
        color: var(--text-color);
        cursor: pointer;
        outline: none;
        border-right: 1px solid var(--border-color);
        border-bottom: 1px solid #171721;

        &:last-of-type {
            border-right: 0 none;
        }
        
        &:hover,
        &:focus {
            background: #f5f5f5;
            text-decoration: none;
            color: var(--text-color);
        }
        &.active {
            background: var(--tab-button-background-color);
            text-decoration: none;
            color: var(--tab-button-text-color);
            border: 0 none;
    
            &:hover,
            &:focus {
                @extend .tab__button.active;
            }
        }
    }    

    &__text {
        position: relative;
        font-size: var(--font-size-2);
        font-weight: var(--bold);
        text-transform: uppercase;
        transition: all 350ms ease;
        padding-bottom: 0.4rem;
        border-bottom: 0.3rem solid transparent;
        text-decoration: none;
        color: inherit;
        cursor: pointer;
      
        & + .tab__text {
          margin-left: 2rem;
      
          &:before {
            content: '|';
            position: absolute;
            top: 0;
            left: -1.2rem;
            font-size: 1.3rem;
            font-weight: var(--bold);
            color: var(--text-color);
          }
        }
      
        &:hover:not(.active),
        &:focus:not(.active) {
            text-decoration: none;
            color: var(--tab-text-hover-color);
        }
      
        &.active {
          border-color: var(--tab-text-active-border);
          text-decoration: none;
          color: inherit;
          cursor: default;
        }
    }

    &__wrapper {
        position: relative;
        margin-bottom: 2.4rem;
        padding-top: 2.4rem;
        align-items: stretch;
        justify-content: left;
        flex-flow: row nowrap;
        display: flex;
        overflow: auto;

        &--vertical {
            flex-flow: column nowrap;
            padding-top: 1.0rem;

            .tab__button {
                padding: 2.4rem 1.2rem;
                border-bottom: 1px solid var(--border-color);
                border-right: none;

                &:last-of-type {
                    border-bottom: 0 none;
                }
            }
        }
    }

    &__content {
        display: none;

        &.active {
            display: block;
        }

    }
}

@include mq-4 {

    .tab__wrapper--vertical {
        flex-flow: row nowrap;
        padding-top: 0;
    }
    .tab__wrapper--vertical .tab__button {
        width: 100%;
        padding: 1.2rem 1.2rem 2.4rem;
        border-bottom: 1px solid var(--tab-button-background);
        border-right: 1px solid var(--border-color);

        &:last-of-type {
            border-right: 0 none;
            border-bottom: 1px solid var(--tab-button-background);
        }
        
    }
    
}

jQuery(function ($) {
    
    // TABS
    if ($('.tab').length > 0) {  
        var tab,
            tabs,
            tabContent,
            tabEncoded,
            tabHash,
            tabHref,
            tabId = [],
            tabUri;
        
        // EACH ON LOAD
        $('.tabs').each(function(){
            tabs = $(this);
            tab = tabs.find('.tab');

            tabs.find('.tab__content').removeClass('active'); // Hide all divs
            tabs.find('.tab__wrapper a:first, .tab__content:first').addClass('active'); // Show the first div        

            $.each(tab, function(){
                tab = $(this);
                tabUri = tab.attr('href');
                tabEncoded = encodeURI(tabUri);
                tabId.push(tabEncoded.split(' ')[0]);
                tab.attr('href', tabEncoded);
            });
        });
        
        $('.tab__content').each(function(index){
            tabContent = $(this);
            tabContent.attr('data-tab', tabId[index]);                
        });

         // ON CLICK
         $('.tab').click(function (e) {
            if (!$(this).hasClass('active')) {
                tabHref = $(this).attr('href');
                $(this).parents('.tabs').find('.tab, .tab__content').removeClass('active');

                $(this).addClass('active');
                $(this).parents('.tabs').find('.tab__content[data-tab="'+ tabHref +'"]').addClass('active');

                history.pushState(null, null, tabHref);
            }
            e.preventDefault();
        });

        // ON LOAD
        if (window.location.hash) {
            tabHash = window.location.hash;
            $('.tab[href="${tabHash}"]').trigger('click');
        } else {
            $('.tab').first().trigger('click');
        }
        
    }

});