/*
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
\* ------------------------------------ */
.opd-tabs {
  --_tab-border-width: var(--tab-border-width, 2px);
  --_tab-border-color: var(--tab-border-color, transparent);
  --_tab-background-color: var(--tab-background-color, transparent);
  --_tab-border-color-state: var(--tab-border-color-state, #752E4A);
  --_tab-color-state: var(--tab-color-state, #752E4A);
  --_tab-font-size: var(--tab-font-size, 1rem);
  --_tab-tablist-border-width: var(--tab-tablist-border-width, " ");
  --_tab-tablist-background-color: var(--tab-tablist-background-color, " ");
  --_tab-button-justify-content: var(--tab-button-justify-content, " ");
  --_tab-button-align-items: var(--tab-button-align-items, " ");
  --_tab-button-padding: var(--tab-button-padding, 0.8em 1em);
  --_tab-button-text-align: var(--tab-button-text-align, " ");
}
.opd-tabs__tablist {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: var(--_tab-tablist-background-color);
}
.opd-tabs__tab {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: var(--_tab-button-justify-content);
      -ms-flex-pack: var(--_tab-button-justify-content);
          justify-content: var(--_tab-button-justify-content);
  -webkit-box-align: var(--_tab-button-align-items);
      -ms-flex-align: var(--_tab-button-align-items);
          align-items: var(--_tab-button-align-items);
  padding: var(--_tab-button-padding);
  border: unset;
  border-color: var(--_tab-border-color);
  background: var(--_tab-background-color);
  font-family: "Nib Pro", serif;
  font-size: var(--_tab-font-size);
  text-align: var(--_tab-button-text-align);
  cursor: pointer;
}
.opd-tabs__tab:hover, .opd-tabs__tab:focus, .opd-tabs__tab[aria-selected=true] {
  color: var(--_tab-color-state);
  border-color: var(--_tab-border-color-state);
}
.opd-tabs__tabpanel.is-hidden {
  display: none;
}
.opd-tabs--horizontal {
  --tab-button-justify-content: center;
  --tab-button-text-align: center;
  --tab-button-align-items: center;
}
.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;
}

/* ------------------------------------ *\
  #MEDIA-QUERIES
\* ------------------------------------ */
@media all and (max-width: 767px) {
  .opd-tabs {
    --_scroll-h-gradient-background: var(--scroll-h-gradient-background, #ffffff);
    --scroll-h-gradient-size: 1em;
    --_tab-tablist-border-width: 1px;
  }
  .opd-tabs .opd-tabs__tablist {
    border-bottom: var(--_tab-tablist-border-width) solid hsl(0deg, 0%, 85%);
  }
  .opd-tabs .opd-tabs__tab {
    border-bottom-width: var(--_tab-border-width);
    border-bottom-style: solid;
  }
  .has-custom-gray-bg-00-background-color .opd-tabs {
    --scroll-h-gradient-background: var(--wp--preset--color--custom-gray-bg-00);
  }
  .opd-tabs__tablist {
    overflow-x: auto;
    margin-bottom: 1.875rem;
    background-image: -webkit-gradient(linear, left top, right top, from(var(--_scroll-h-gradient-background)), to(var(--_scroll-h-gradient-background))), -webkit-gradient(linear, left top, right top, from(var(--_scroll-h-gradient-background)), to(var(--_scroll-h-gradient-background))), -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.25)), to(rgba(255, 255, 255, 0))), -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.25)), to(rgba(255, 255, 255, 0)));
    background-image: -o-linear-gradient(left, var(--_scroll-h-gradient-background), var(--_scroll-h-gradient-background)), -o-linear-gradient(left, var(--_scroll-h-gradient-background), var(--_scroll-h-gradient-background)), -o-linear-gradient(left, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)), -o-linear-gradient(right, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0));
    background-image: linear-gradient(to right, var(--_scroll-h-gradient-background), var(--_scroll-h-gradient-background)), linear-gradient(to right, var(--_scroll-h-gradient-background), var(--_scroll-h-gradient-background)), linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0));
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-size: var(--scroll-h-gradient-size) 100%, var(--scroll-h-gradient-size) 100%, var(--scroll-h-gradient-size) 100%, var(--scroll-h-gradient-size) 100%;
    background-attachment: local, local, scroll, scroll;
  }
  .opd-tabs__tab {
    white-space: nowrap;
  }
}
@media all and (min-width: 768px) {
  .opd-tabs--horizontal {
    --_tab-tablist-border-width: 1px;
  }
  .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;
  }
}