/*
A simple little SCSS mixin for creating scrim gradients
Inspired by Andreas Larson - https://github.com/larsenwork
https://css-tricks.com/easing-linear-gradients/
*/
/* HIGHTLIGHT GRID STYLE - reusable - for FacetWp */
/**
 * TABS-VERTICAL
 *
 * Tabs component style
 * opd-tabs opd-tabs--vertical wrapper
 * opd-tabs__tablist tab buttons wrapper
 * opd-tabs__tabpanel tabpanel element
 * 
*/
/* ------------------------------------ *\
  #TABS-VERTICAL
\* ------------------------------------ */
.opd-tabs--vertical {
  --tab-button-justify-content: flex-start;
  --tab-button-text-align: left;
  --_tab-gap: var(--tab-gap, 0.9375rem);
  gap: var(--_tab-gap);
  position: relative;
}
.opd-tabs--vertical .opd-tabs__tablist {
  position: sticky;
  top: 0;
  -ms-flex-item-align: start;
      align-self: start;
}

/* ------------------------------------ *\
  #MEDIA-QUERIES
\* ------------------------------------ */
@media all and (min-width: 768px) {
  .opd-tabs--vertical {
    --tab-gap: 1.875rem;
    --tab-font-size: clamp(0.875rem, 1rem + 1.5vw, 1.125rem);
    --tab-button-padding: 0.8em;
  }
  .opd-tabs--vertical .opd-tabs__tablist {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column nowrap;
            flex-flow: column nowrap;
  }
  .opd-tabs--vertical .opd-tabs__tab {
    border-left-width: var(--_tab-border-width);
    border-left-style: solid;
  }
}