:root {
  --wa-responsive-tabs-transition: 200ms ease-in-out;
  --wa-responsive-tabs-buttons-gap: var(--space-l);
  --wa-responsive-tabs-button-bg: transparent;
  --wa-responsive-tabs-button-padding: var(--space-xs) var(--space-m);
  --wa-responsive-tabs-button-radius: var(--radius-xs);
  --wa-responsive-tabs-button-color: var(--base);
  --wa-responsive-tabs-button-font-size: calc(var(--text-m) * 1.05);
  --wa-responsive-tabs-button-weight: 700;
  --wa-responsive-tabs-button-active-bg: var(--accent);
  --wa-responsive-tabs-button-active-color: var(--base);
  --wa-responsive-tabs-button-active-weight: 700;
  --wa-responsive-tabs-button-hover-color: var(--base);
  --wa-responsive-tabs-content-bg: var(--white);
  --wa-responsive-tabs-content-radius: var(--radius-xs);
  --wa-responsive-tabs-content-padding: var(--space-l);
  --wa-responsive-tabs-content-shadow: none;
}
@media (max-width: 768px) {
  :root {
    --wa-responsive-tabs-button-bg: #fff;
    --wa-responsive-tabs-button-padding: var(--space-s) calc(var(--space-xs) * 1.2);
    --wa-responsive-tabs-button-font-size: calc(var(--text-m) * 1.05);
    --wa-responsive-tabs-button-box-shadow: none;
    --wa-responsive-tabs-button-margin-bottom: var(--space-s);
    --wa-responsive-tabs-button-weight: 700;
    --wa-responsive-tabs-button-active-bg: var(--accent);
    --wa-responsive-tabs-content-padding: var(--space-m) calc(var(--space-s) * 1.2);
  }
}
.wa-responsive-tabs-buttons-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  gap: var(--wa-responsive-tabs-buttons-gap);
}
.wa-responsive-tabs-button {
  display: flex;
  align-items: center;
  gap: calc(var(--space-xs) * 0.8);
  background: var(--wa-responsive-tabs-button-bg);
  padding: var(--wa-responsive-tabs-button-padding);
  border-top-left-radius: var(--wa-responsive-tabs-button-radius);
  border-top-right-radius: var(--wa-responsive-tabs-button-radius);
  color: var(--wa-responsive-tabs-button-color);
  font-size: var(--wa-responsive-tabs-button-font-size);
  font-weight: var(--wa-responsive-tabs-button-weight);
}
.wa-responsive-tabs-button span {
  display: flex;
  flex-direction: row;
  gap: var(--space-xs);
  align-items: center;
}
.wa-responsive-tabs-button[data-wa-tab-button-id="product-desc"] {
  --tab-icon: url(/wp-content/uploads/2024/03/pencil.svg);
}
.wa-responsive-tabs-button[data-wa-tab-button-id="technical"] {
  --tab-icon: url(/wp-content/uploads/2024/03/info.svg);
}
.wa-responsive-tabs-button[data-wa-tab-button-id="equipment"] {
  --tab-icon: url(/wp-content/uploads/2024/03/technical.svg);
}
.wa-responsive-tabs-button[data-wa-tab-button-id="videos"] {
  --tab-icon: url(/wp-content/uploads/2024/04/PLAYBTN.svg);
}
.wa-responsive-tabs-button[data-wa-tab-button-id="documents"] {
  --tab-icon: url(/wp-content/uploads/2024/03/document.svg);
}
.wa-responsive-tabs-button > span:before {
  content: "";
  display: block;
  height: 3rem;
  width: 3rem;
  background-position: center center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background: var(--tab-icon);
}
@media (min-width: 769px) {
  .wa-responsive-tabs-button:before {
    content: "";
    display: block;
    height: 3rem;
    width: 3rem;
    background-position: center center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background: var(--tab-icon);
  }
}
.wa-responsive-tabs-button:hover {
  color: var(--wa-responsive-tabs-button-hover-color);
}
.wa-responsive-tabs-button.wa-tab-active {
  background: transparent;
  border: 1px solid var(--shade-light);
  position: relative;
  color: var(--wa-responsive-tabs-button-active-color);
  font-weight: var(--wa-responsive-tabs-button-active-weight);
}
.wa-responsive-tabs-button.wa-tab-active:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 3px;
  background-color: var(--white);
  bottom: -2px;
  left: 0;
}
.wa-responsive-tabs-button img {
  height: 1.5rem;
  width: auto;
  transition: var(--wa-responsive-tabs-transition);
}
.wa-responsive-tabs-content {
  background: var(--wa-responsive-tabs-content-bg);
  padding: var(--wa-responsive-tabs-content-padding);
  box-shadow: var(--wa-responsive-tabs-content-shadow);
  border-radius: var(--wa-responsive-tabs-content-radius);
  border: 1px solid var(--shade-light);
}
@media (max-width: 768px) {
  .wa-responsive-tabs-button span {
    pointer-events: none;
  }
  .wa-responsive-tabs-contents {
    display: flex;
    flex-direction: column;
  }
  .wa-responsive-tabs-button {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  .wa-responsive-tabs-button.wa-tab-active img {
    transform: rotate(90deg);
  }
  .wa-responsive-tabs-button:not(.wa-tab-active) {
    border: 1px solid var(--shade-light);
    margin-bottom: var(--wa-responsive-tabs-button-margin-bottom);
    border-radius: var(--wa-responsive-tabs-button-radius);
    box-shadow: var(--wa-responsive-tabs-button-box-shadow);
  }
  .wa-responsive-tabs-button:last-of-type {
    margin-bottom: 0 !important;
  }
  .wa-responsive-tabs-content {
    border-radius: 0;
    border-bottom-left-radius: var(--wa-responsive-tabs-content-radius);
    border-bottom-right-radius: var(--wa-responsive-tabs-content-radius);
  }
  .wa-responsive-tabs-content.wa-tab-active {
    margin-bottom: var(--wa-responsive-tabs-button-margin-bottom);
  }
}

