/*  ----- opptylab-section-tabs ------   */



/* colors tabs */

.opptylab-component-tabs .opptylab-tab                                              { background-color:var(--surface-dark-1); }
.opptylab-component-tabs .opptylab-tab  p                                           { color: var(--text-diap); }

.opptylab-component-tabs .opptylab-tab.active-tab                                   { background-color:var(--surface-light-1); }
.opptylab-component-tabs .opptylab-tab.active-tab p                                 { color: var(--text); }


.opptylab-component-button-tabs .opptylab-tab                                       { background-color:none !important; border-bottom:5px solid red;}
.opptylab-component-button-tabs .opptylab-tab .opptylab-tab-name p                  { color: var(--text); }
.opptylab-component-button-tabs .opptylab-tab .opptylab-tab-icon p                  { color: var(--text); }
.opptylab-component-button-tabs .opptylab-tab .opptylab-tab-icon-di p               { color: var(--text); }

.opptylab-component-button-tabs .opptylab-tab.active-tab                            { background-color:none; border-bottom:5px solid black;}
.opptylab-component-button-tabs .opptylab-tab.active-tab .opptylab-tab-name p       { color: var(--text); }
.opptylab-component-button-tabs .opptylab-tab.active-tab .opptylab-tab-icon p       { color: var(--text); }
.opptylab-component-button-tabs .opptylab-tab.active-tab .opptylab-tab-icon-di p    { color: var(--text); }
     
 
/* colors side tabs */

.opptylab-component-side-tabs .opptylab-tab                                     { background-color:var(--surface-dark-1); }
.opptylab-component-side-tabs .opptylab-tab .opptylab-tab-name p                 { color: var(--text-diap); }
.opptylab-component-side-tabs .opptylab-tab .opptylab-tab-icon p                 { color: var(--text-diap); }
.opptylab-component-side-tabs .opptylab-tab .opptylab-tab-icon-di p              { color: var(--text-diap); }

.opptylab-component-side-tabs .opptylab-tab.active-tab                          { background-color:var(--surface-light-1); }
.opptylab-component-side-tabs .opptylab-tab.active-tab .opptylab-tab-name p     { color: var(--text); }
.opptylab-component-side-tabs .opptylab-tab.active-tab .opptylab-tab-icon p      { color: var(--text); }
.opptylab-component-side-tabs .opptylab-tab.active-tab .opptylab-tab-icon-di p   { color: var(--text); }
     
@media only screen and (max-width: 768px) {
.opptylab-component-side-tabs .opptylab-tab                                     { background-color:var(--surface-dark-1); }
.opptylab-component-side-tabs .opptylab-tab .opptylab-tab-name                  { color: var(--text-diap); }
.opptylab-component-side-tabs .opptylab-tab .opptylab-tab-icon                  { color: var(--text-diap); }
.opptylab-component-side-tabs .opptylab-tab .opptylab-tab-icon-di               { color: var(--text-diap); }

.opptylab-component-side-tabs .opptylab-tab.active-tab                          { background-color:var(--surface-light-1); }
.opptylab-component-side-tabs .opptylab-tab.active-tab .opptylab-tab-name       { color: var(--text); }
.opptylab-component-side-tabs .opptylab-tab.active-tab .opptylab-tab-icon       { color: var(--text); }
.opptylab-component-side-tabs .opptylab-tab.active-tab .opptylab-tab-icon-di    { color: var(--text); }
}



/* colors panels */

@media only screen and (min-width: 768px) { .opptylab-component-tabs .opptylab-tab-content-wrapper                  { background-color:var(--surface-light-1);  }} 
@media only screen and (max-width: 768px) { .opptylab-component-tabs .opptylab-tab-panel-content-wrapper            { background-color:var(--surface-light-1);  }}


@media only screen and (min-width: 768px) { .opptylab-component-button-tabs .opptylab-tab-content-wrapperr          { background-color:none;  }} 
@media only screen and (max-width: 768px) { .opptylab-component-button-tabs .opptylab-tab-panel-content-wrapper     { background-color:none;  }}


@media only screen and (min-width: 768px) { .opptylab-component-side-tabs .opptylab-tab-content-wrapperr            { background-color:none;  }} 
@media only screen and (max-width: 768px) { .opptylab-component-side-tabs .opptylab-tab-panel-content-wrapper       { background-color:none;  }}







/* -------------------------------- */
/* ----- Disclosure indicator ----- */
/* -------------------------------- */


/* DI Icon tabs */
.opptylab-component-tabs .opptylab-tab .opptylab-tab-icon-di .material-symbols-outlined::before          { content:'\e313'; }
.opptylab-component-tabs .opptylab-tab .opptylab-tab-icon-di                                             { transition: transform 0.2s ease;}

/* DI Icon button tabs */
.opptylab-component-button-tabs .opptylab-tab .opptylab-tab-icon-di .material-symbols-outlined::before   { content:'\e313'; }
.opptylab-component-button-tabs .opptylab-tab .opptylab-tab-icon-di                                      { transition: transform 0.2s ease;}

/* DI Icon side tabs */
.opptylab-component-side-tabs .opptylab-tab .opptylab-tab-icon-di .material-symbols-outlined::before     { content:'\e313'; }
.opptylab-component-side-tabs .opptylab-tab .opptylab-tab-icon-di                                        { transition: transform 0.2s ease;}



/* Position & rotation DI icon tabs */

.opptylab-component-tabs .opptylab-tab .opptylab-tab-icon-di                        { transform: rotate(0deg) translateY(4px); }
.opptylab-component-tabs .opptylab-tab.active-tab .opptylab-tab-icon-di             { transform: rotate(180deg) translateY(4px); }

@media only screen and (min-width: 768px) {
.opptylab-component-tabs .opptylab-tab:hover .opptylab-tab-icon-di                  { transform: rotate(0deg) translateY(8px); }
.opptylab-component-tabs .opptylab-tab.active-tab:hover .opptylab-tab-icon-di       { transform: rotate(180deg) translateY(4px); }
}

/* Position & rotation DI icon button tabs */

.opptylab-component-button-tabs .opptylab-tab .opptylab-tab-icon-di                  { transform: rotate(0deg) translateY(4px); }
.opptylab-component-button-tabs .opptylab-tab.active-tab .opptylab-tab-icon-di       { transform: rotate(180deg) translateY(4px); }

@media only screen and (min-width: 768px) {
.opptylab-component-tabs .opptylab-tab:hover .opptylab-tab-icon-di                   { transform: rotate(0deg) translateY(8px); }
.opptylab-component-tabs .opptylab-tab.active-tab:hover .opptylab-tab-icon-di        { transform: rotate(180deg) translateY(4px); }
}

/* Position & rotation DI icon side tabs */

.opptylab-component-side-tabs .opptylab-tab .opptylab-tab-icon-di                    { transform: rotate(-90deg) translateY(4px); }
.opptylab-component-side-tabs .opptylab-tab.active-tab .opptylab-tab-icon-di         { transform: rotate(90deg) translateY(4px); }

@media only screen and (min-width: 768px) {
.opptylab-component-side-tabs .opptylab-tab:hover .opptylab-tab-icon-di              { transform: rotate(-90deg) translateY(8px); }
.opptylab-component-side-tabs .opptylab-tab.active-tab:hover .opptylab-tab-icon-di   { transform: rotate(90deg) translateY(4px); }
}

@media only screen and (max-width: 768px) {
.opptylab-component-side-tabs .opptylab-tab .opptylab-tab-icon-di                     { transform: rotate(0deg) translateY(4px); }
.opptylab-component-side-tabs .opptylab-tab.active-tab .opptylab-tab-icon-di          { transform: rotate(180deg) translateY(4px); }
}




















/* General tabs  */

.opptylab-tab { 
    width: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    white-space: nowrap; 
    box-sizing: border-box;
    will-change: background-color, border-radius; /* Helpt de browser bij animaties */
    overflow: hidden; /* Voorkomt dat iconen buiten de tab knipperen */
    backface-visibility: hidden; /* Helpt bij soepele transities op Chrome/Safari */
    cursor: pointer;
}

/* ----- Spacing tabs ----- */


.opptylab-tab           {   padding: 1rem 1rem; }
.opptylab-tab-name      {   padding: 0 0.5rem; }
.opptylab-tab-icon      {   padding: 0 0.25rem; }

.opptylab-tab-icon      { top:3px; position:relative;}
.opptylab-tab-name      { width: 100%; }





/* ------------------------ */
/* ----- Tabs wrapper ----- */
/* ------------------------ */

/* Tabs wrapper */

.opptylab-component-tabs .opptylab-tabs-wrapper     {  width:100%; display:flex; column-gap: calc(1rem / 2); }

@media only screen and (max-width: 768px) { 
.opptylab-component-tabs .opptylab-tabs-wrapper     { flex-direction: column; }
.opptylab-component-tabs .opptylab-tab              {   margin-top:10px; }
}

/* Button tabs wrapper */

.opptylab-component-button-tabs .opptylab-tabs-wrapper     { width:100%; display:flex; column-gap: calc(1rem / 2); }

@media only screen and (max-width: 768px) { 
.opptylab-component-button-tabs .opptylab-tabs-wrapper     { flex-direction: column; }
.opptylab-component-button-tabs .opptylab-tab              { margin-top:calc(1rem / 2); }
}


/* Side tabs wrapper */

.opptylab-component-side-tabs .opptylab-tabs-wrapper            { width:50%; }
.opptylab-component-side-tabs .opptylab-tab-content-wrapper     { width:50%; }

.opptylab-component-side-tabs { display:flex; column-gap: 10px; flex-direction: row; }
.opptylab-component-side-tabs .opptylab-tabs-wrapper { flex-direction: column; }


@media only screen and (max-width: 768px) {
  .opptylab-component-side-tabs                                  { display:block; }
  .opptylab-component-side-tabs .opptylab-tabs-wrapper           { width:100%; }
  .opptylab-component-side-tabs .opptylab-tab-content-wrapper    { width:100%; }
}


.opptylab-component-side-tabs .opptylab-tab { margin-top:calc(1rem / 2); }
.opptylab-component-side-tabs .opptylab-tab-content-wrapper { margin-top:calc(1rem / 2); }
.opptylab-component-side-tabs .opptylab-tab-name { width:100%; }


/* ---------------------------- */
/* ------ Content wrapper ----- */
/* ---------------------------- */

/* Content panels */

.opptylab-component-tabs .opptylab-tab-panel-content {
     padding:2rem 1.5rem;
}

.opptylab-component-button-tabs .opptylab-tab-panel-content {
     padding:2rem 0;
}



/* De hoofdcontainer (& animatie) */
.opptylab-tab-content-wrapper {
    transition: height 0.2s ease-in-out; 
    overflow: hidden;
    position: relative;

}

.opptylab-tab-panel-content-wrapper {
    width: 100%;
    opacity: 0; 
    display: none;
}

.opptylab-tab-panel-content {
    opacity: 1 !important; /* Zorg dat de binnenkant zichtbaar is, de wrapper regelt de fade */
}



/* -------------------------------- */
/* ---------  Corners -------- */
/* -------------------------------- */


/* Tabs corners */

.opptylab-component-tabs .opptylab-tab                   { border-radius : calc(var(--border-radius-s) / 2) calc(var(--border-radius-s) / 2) 0 0;  }

@media only screen and (max-width: 768px) {
.opptylab-component-tabs .opptylab-tab                   { border-radius: calc(var(--border-radius-s) / 2);  }
.opptylab-component-tabs .opptylab-tab.active-tab        { border-radius: calc(var(--border-radius-s) / 2);  }
}


/* Button tabs corners */

.opptylab-component-button-tabs .opptylab-tab           { border-radius : calc(var(--border-radius-s) / 2);  }

@media only screen and (max-width: 768px) {
.opptylab-component-button-tabs .opptylab-tab           { border-radius: calc(var(--border-radius-s) / 2) calc(var(--border-radius-s) / 2); }
}

/* Side tabs corners */

.opptylab-component-side-tabs .opptylab-tab              { border-radius: calc(var(--border-radius-s) / 2); }

@media only screen and (max-width: 768px) {
.opptylab-component-side-tabs .opptylab-tab.active-tab   { border-radius: calc(var(--border-radius-s) / 2) calc(var(--border-radius-s) / 2) 0 0; }
}


/* ---- Panels ----- */

/* Tabs panel corners */

.opptylab-component-tabs .opptylab-tab-content-wrapper          { border-radius:  0 var(--border-radius-s) var(--border-radius-s) var(--border-radius-s); }
@media only screen and (max-width: 768px) {
.opptylab-tab-content-wrapper                       { border-radius:  0px 0px var(--border-radius-s) var(--border-radius-s); }
.opptylab-tab-panel-content-wrapper                 { border-radius:  0px 0px var(--border-radius-s) var(--border-radius-s); }
}

/* When tabs indent in wrapper:
opptylab-component-tabs .opptylab-tabs-wrapper              { padding-left:20px;} 
.opptylab-component-tabs .opptylab-tab-content-wrapper      { border-radius:  var(--border-radius-s); }
*/

.opptylab-component-button-tabs .opptylab-tab-content-wrapper          { border-radius:  0; }
@media only screen and (max-width: 768px) {
.opptylab-tab-content-wrapper                       { border-radius:  0px 0px var(--border-radius-s) var(--border-radius-s); }
.opptylab-tab-panel-content-wrapper                 { border-radius:  0px 0px var(--border-radius-s) var(--border-radius-s); }
}


.opptylab-component-side-tabs .opptylab-tab-panel-content-wrapper        {  border-radius: 0; }




/* -----------
Zorg voor een soepele overgang op het element zelf 
---------------------*/

.opptylab-tab-panel-content-wrapper {
    transition: height 0.4s ease, opacity 0.6s ease; 
    opacity: 0;
}

.opptylab-tab-panel-content-wrapper.js-ready {
    opacity: 1;
}







.sidebar-wrapper { width: 100%; height:100vh;   }
.sidebar .opptylab-tabs-wrapper { width: 300px; height:100vh; }


.sidebar .opptylab-tabs-wrapper{ background-color:var(--surface-light-1); }
.sidebar .opptylab-tab-content-wrapper { width: calc(100% - 300px); display:flex; justify-content: center; }


.sidebar .opptylab-tab-panel-content-wrapper { width: 1080px; }

.sidebar .opptylab-tab  {  padding: 0.25rem 0.25rem; }

.sidebar .opptylab-component-side-tabs .opptylab-tab                                     {     background-color: unset; }
.sidebar .opptylab-component-side-tabs .opptylab-tab  p                 { color: var(--text); }

.sidebar .opptylab-component-side-tabs .opptylab-tab.active-tab                          { background-color:var(--surface-light-1); }
.sidebar .opptylab-component-side-tabs .opptylab-tab.active-tab  p     { color: var(--text); }