/*!***************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/blocks/tabs/style.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************/
/* -------------------------------- 

File#: tabs
Title: Tabs
Descr: A list of content sections (panels), accessible one at a time using control labels

-------------------------------- */
.bsab4s-tabs__control {
  text-decoration: none;
  color: var(--bsaweb--color--contrast-medium);
}
.bsab4s-tabs__control:hover {
  color: var(--bsaweb--color--contrast-high);
}
.bsab4s-tabs__control[aria-selected=true] {
  color: var(--bsaweb--color--contrast-high);
  text-decoration: underline;
}

.bsab4s-tabs__panel--hide {
  display: none;
}

.bsab4s-tabs[data-animation=on] .bsab4s-tabs--no-interaction .bsab4s-tabs__panel {
  animation-duration: 0s;
  animation-delay: 0s;
}
.bsab4s-tabs[data-animation=on] .bsab4s-tabs__panel--show {
  animation: tabs-panel-entry-animation 0.5s;
}
.bsab4s-tabs[data-animation=on] .bsab4s-tabs__panel--hide {
  animation: tabs-panel-exit-animation 0.5s;
}

@keyframes accordion-entry-animation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0px);
  }
}
/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */
:root {
  --bsaweb--tabs--border-width: 1px;
  --bsaweb--tabs--radius: 0.375em;
  --bsaweb--tabs--control--gap: var(--bsaweb--tabs--border-width);
  --bsaweb--tabs--control--radius: 0;
}

.wp-block-bsaweb-blocks-tabs .bsab4s-tabs {
  border: var(--bsaweb--tabs--border-width) solid var(--bsaweb--color--contrast-low);
  padding: var(--bsaweb--spacing--md);
  border-radius: var(--bsaweb--tabs--radius);
  background-color: var(--bsaweb--color--bg);
}
.wp-block-bsaweb-blocks-tabs .bsab4s-tabs__nav-list {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: var(--bsaweb--spacing--xs);
}
.wp-block-bsaweb-blocks-tabs .bsab4s-tabs__nav-item {
  display: inline-block;
  margin: 0 var(--bsaweb--spacing--xs) var(--bsaweb--spacing--xs) 0;
}
.wp-block-bsaweb-blocks-tabs .bsab4s-tabs__control {
  display: inline-flex;
  text-decoration: none;
  background-color: hsla(var(--bsaweb--color--contrast-higher-h), var(--bsaweb--color--contrast-higher-s), var(--bsaweb--color--contrast-higher-l), 0.1);
  padding: var(--bsaweb--spacing--xs) var(--bsaweb--spacing--sm);
  white-space: nowrap;
  color: inherit;
  border-radius: var(--bsaweb--tabs--control--radius);
}
.wp-block-bsaweb-blocks-tabs .bsab4s-tabs__control[aria-selected=true] {
  background-color: var(--bsaweb--color--primary);
  color: var(--bsaweb--color--white);
}
.wp-block-bsaweb-blocks-tabs .bsab4s-tabs__control[aria-selected=true]:hover {
  background-color: var(--bsaweb--color--primary-light);
}
.wp-block-bsaweb-blocks-tabs .bsab4s-tabs__panel {
  margin-bottom: 0;
}
@media (min-width: 64rem) {
  .wp-block-bsaweb-blocks-tabs .bsab4s-tabs {
    padding: 0;
    border: none;
    background-color: transparent;
  }
  .wp-block-bsaweb-blocks-tabs .bsab4s-tabs__nav-list {
    margin-bottom: 0;
  }
  .wp-block-bsaweb-blocks-tabs .bsab4s-tabs__nav-item {
    margin-top: 0;
    margin-left: calc(-1 * var(--bsaweb--tabs--border-width));
    margin-right: var(--bsaweb--tabs--control--gap);
    margin-bottom: 0;
  }
  .wp-block-bsaweb-blocks-tabs .bsab4s-tabs__nav-item:first-child {
    margin-left: 0;
  }
  .wp-block-bsaweb-blocks-tabs .bsab4s-tabs__nav-item:first-child .bsab4s-tabs__control {
    border-radius: var(--bsaweb--tabs--radius) var(--bsaweb--tabs--control--radius) 0 0;
  }
  .wp-block-bsaweb-blocks-tabs .bsab4s-tabs__nav-item:last-child .bsab4s-tabs__control {
    border-radius: var(--bsaweb--tabs--control--radius) var(--bsaweb--tabs--radius) 0 0;
  }
  .wp-block-bsaweb-blocks-tabs .bsab4s-tabs__control {
    height: 100%;
    background-color: transparent;
    border: var(--bsaweb--tabs--border-width) solid transparent;
    border-bottom-width: 0;
    border-radius: var(--bsaweb--tabs--control--radius) var(--bsaweb--tabs--control--radius) 0 0;
  }
  .wp-block-bsaweb-blocks-tabs .bsab4s-tabs__control:hover {
    background-color: hsla(var(--bsaweb--color--contrast-higher-h), var(--bsaweb--color--contrast-higher-s), var(--bsaweb--color--contrast-higher-l), 0.075);
  }
  .wp-block-bsaweb-blocks-tabs .bsab4s-tabs__control[aria-selected=true] {
    background-color: var(--bsaweb--color--bg);
    color: var(--bsaweb--color--primary);
    position: relative;
    border-color: var(--bsaweb--color--contrast-lower);
  }
  .wp-block-bsaweb-blocks-tabs .bsab4s-tabs__control[aria-selected=true]:hover {
    background-color: inherit;
  }
  .wp-block-bsaweb-blocks-tabs .bsab4s-tabs__control[aria-selected=true]::after {
    /* border bottom -> it covers the border of the panel element */
    content: "";
    position: absolute;
    left: 0;
    bottom: calc(-1 * var(--bsaweb--tabs--border-width));
    width: 100%;
    height: var(--bsaweb--tabs--border-width);
    background-color: var(--bsaweb--color--bg);
    z-index: 1;
  }
  .wp-block-bsaweb-blocks-tabs .bsab4s-tabs__panels {
    border: var(--bsaweb--tabs--border-width) solid var(--bsaweb--color--contrast-lower);
    border-radius: 0 var(--bsaweb--tabs--radius) var(--bsaweb--tabs--radius) var(--bsaweb--tabs--radius);
    background-color: var(--bsaweb--color--bg);
  }
  .wp-block-bsaweb-blocks-tabs .bsab4s-tabs__panel {
    padding: var(--bsaweb--spacing--sm);
  }
}

/*# sourceMappingURL=style-index.css.map*/