/*
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
 *
 * Tabs component style
 * opd-tabs wrapper
 * opd-tabs__tablist tab buttons wrapper
 * opd-tabs__tabpanel tabpanel element
 * 
*/
/* ------------------------------------ *\
  #TABS
\* ------------------------------------ */
.opd-tabs--horizontal {
  --_tab-tablist-border-width: 1px;
  --tab-button-justify-content: center;
  --tab-button-text-align: center;
  --tab-button-align-items: center;
}
.opd-tabs--horizontal .opd-tabs__tablist {
  border-bottom: var(--_tab-tablist-border-width) solid hsl(0deg, 0%, 85%);
}
.opd-tabs--horizontal .opd-tabs__tab {
  border-bottom-width: var(--_tab-border-width);
  border-bottom-style: solid;
}
.opd-tabs--horizontal .opd__tabpanel-wrapper {
  /* Fix for same-height tabs */
  /* The content of each tab should start on the left,
      * take the full width,
      * and allow the content of the next tab to start again on the left. */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.opd-tabs--horizontal .opd__tabpanel-wrapper .opd-tabs__tabpanel {
  width: 100%;
  margin-right: -100%; /* Take fullspace occupied by visibility: hidden tabs */
}
.opd-tabs--horizontal .opd__tabpanel-wrapper .opd-tabs__tabpanel.is-hidden {
  display: block; /* undo "display: none;" */
  visibility: hidden; /* makes the tab's container takes tallest tab height, not just of visibile one */
  opacity: 0;
}
.opd-tabs--horizontal .opd__tabpanel-wrapper .opd-tabs__tabpanel:not(.is-hidden) {
  visibility: visible;
  opacity: 1;
}

/* TABS DECORATED */
/* Radial gradient decoration */
.opd-tabs--decorated {
  --_tab-decoration-height: var(--tab-decoration-height, 1.875rem);
}

/* ------------------------------------ *\
  #MEDIA-QUERIES
\* ------------------------------------ */
@media all and (min-width: 768px) {
  .opd-tabs--decorated {
    --tab-decoration-height: 2.8125rem;
  }
  .opd-tabs--decorated .opd-tabs__tablist {
    position: relative;
    margin-bottom: var(--_tab-decoration-height);
  }
  .opd-tabs--decorated .opd-tabs__tablist::after {
    content: "";
    display: block;
    width: 100%;
    height: var(--_tab-decoration-height);
    background: -o-radial-gradient(50% 7.32%, 43.9% 43.9%, #e8e8e8 0%, hsla(40deg, 20%, 97%, 0) 100%);
    background: radial-gradient(43.9% 43.9% at 50% 7.32%, #e8e8e8 0%, hsla(40deg, 20%, 97%, 0) 100%);
    position: absolute;
    top: calc(100% + var(--_tab-tablist-border-width));
  }
  .opd-tabs--horizontal {
    --tab-font-size: clamp(1.125rem, 1rem + 1.2vw, 1.5rem);
  }
}
/* ------------------------------------ *\
  #MEDIA-QUERIES
\* ------------------------------------ */