/*!*******************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/blocks/tabs/style.css ***!
  \*******************************************************************************************************************************************************************************/
.wp-block-brblocks-tabs {
  font-family: "Gibson", sans-serif;
  
  * {
    font-family: inherit !important;
  }
}

.wp-block-brblocks-tabs {
  .tab-button {
    font-size: 16px;
  }
}

.tab-button:focus {
  outline: none;
}

.wp-block-brblocks-tabs {
  font-family: inherit;

  .tab-button,
  .tab-title-inline,
  .tab-content,
  .tab-buttons {
    font-family: inherit;
  }
}

.wp-block-brblocks-tabs[class*="is-style-blue"] {
  .tab-buttons {
        display: flex;
        gap: 0.75rem;
        padding-left: 0.5rem;
        flex-wrap: wrap;
        flex-direction: row;
    }

  .tab-button {
    background: transparent;
    border: none;
    padding: 0.75rem 1rem;
    font-weight: bold;
    cursor: pointer;
    color: #5a6268;
    border-bottom: 2px solid #5a6268;
    transition: all 0.3s ease;

    &:hover {
      color: #009cde;
      border-bottom: 2px solid #009cde;
    }

    &.active {
      background-color: #e6f4ff;
      border-bottom: 2px solid #009cde;
      color: #000;
    }
  }

  .tab-contents {
    border-top: none;
    padding: 1rem;
  }
}

.wp-block-brblocks-tabs[class*="is-style-white"] {
  .tab-buttons {
        display: flex;
        gap: 0.75rem;
        padding-left: 0.5rem;
        flex-wrap: wrap;
        flex-direction: row;
    }

  .tab-button {
    background: transparent;
    border: none;
    padding: 0.75rem 1rem;
    font-weight: bold;
    cursor: pointer;
    color: #5a6268;
    border-bottom: 2px solid #5a6268;
    transition: all 0.3s ease;

    &:hover {
      color: #5a6268;
      border-bottom: 2px solid #009cde;
    }

    &.active {
      background-color: #fff;
      border-bottom: 2px solid #009cde;
      color: #000;
    }
  }

  .tab-contents {
    border-top: none;
    padding: 1rem;
  }
}

.wp-block-brblocks-tabs[class*="is-style-transparent"] {
  .tab-buttons {
        display: flex;
        gap: 0.75rem;
        padding-left: 0.5rem;
        flex-wrap: wrap;
        flex-direction: row;
    }

  .tab-button {
    background: transparent;
    border: none;
    padding: 0.75rem 1rem;
    font-weight: bold;
    cursor: pointer;
    color: #5a6268;
    border-bottom: 2px solid #5a6268;
    transition: all 0.3s ease;

    &:hover {
      color: #5a6268;
      border-bottom: 2px solid #009cde;
    }

    &.active {
      border-bottom: 2px solid #009cde;
      color: #000;
    }
  }

  .tab-contents {
    border-top: none;
    padding: 1rem;
  }
}

.wp-block-brblocks-tabs.vertical[class*="is-style-blue"] {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;

    .tab-buttons {
        display: flex;
        flex-direction: column;
        min-width: 200px;
        border-right: 1px solid #009cde;
        padding-right: 1rem;
    }

  .tab-button {
    background: transparent;
    border: none;
    padding: 0.75rem 1rem;
    font-weight: bold;
    text-align: left;
    cursor: pointer;
    color: #5a6268;
    border-left: 4px solid transparent;
    transition: all 0.3s ease;

    &:hover {
      color: #009cde;
      border-left: 4px solid #009cde;
    }

    &.active {
      background-color: #e6f4ff;
      color: #000;
      border-left: 4px solid #009cde;
    }

    &:focus {
      outline: 2px solid #009cde;
      outline-offset: 2px;
    }
  }

  .tab-contents {
    flex: 1;
    padding: 0 1rem;
    border-left: none;
  }
}


.wp-block-brblocks-tabs.vertical[class*="is-style-white"] {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;

    .tab-buttons {
        display: flex
;
        flex-direction: column;
        min-width: 200px;
        border-right: 1px solid #ccc;
        padding-right: 1rem;
    }

  .tab-button {
    background: transparent;
    border: none;
    padding: 0.75rem 1rem;
    font-weight: bold;
    text-align: left;
    cursor: pointer;
    color: #5a6268;
    border-left: 4px solid transparent;
    transition: all 0.3s ease;

    &:hover {
        color: #5a6268;
      border-bottom: 2px solid #009cde;
    }

    &.active {
      background-color: #fff;
      color: #000;
      border-left: 4px solid #009cde;
    }

    &:focus {
      outline: 2px solid #009cde;
      outline-offset: 2px;
    }
  }

  .tab-contents {
    flex: 1;
    padding: 0 1rem;
    border-left: none;
  }
}


.wp-block-brblocks-tabs.vertical[class*="is-style-transparent"] {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;

    .tab-buttons {
        display: flex;
        flex-direction: column;
        min-width: 200px;
        border-right: 1px solid #ccc;
        padding-right: 1rem;
    }

  .tab-button {
    background: transparent;
    border: none;
    padding: 0.75rem 1rem;
    font-weight: bold;
    text-align: left;
    cursor: pointer;
    color: #5a6268;
    border-left: 4px solid transparent;
    transition: all 0.3s ease;

    &:hover {
        color: #5a6268;
      border-bottom: 2px solid #009cde;
    }

    &.active {
      color: #000;
      border-left: 4px solid #009cde;
    }

    &:focus {
      outline: 2px solid #009cde;
      outline-offset: 2px;
    }
  }

  .tab-contents {
    flex: 1;
    padding: 0 1rem;
    border-left: none;
  }
}

.wp-block-brblocks-tabs.vertical {
  .tab-content h2:first-child {
    margin-top: 0;
  }
}

.wp-block-brblocks-tabs .tab-title-inline {
  font-family: inherit;
}

.tab-button .tab-title-inline {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

@media screen and (max-width: 768px) {
  
  .wp-block-brblocks-tabs[class*="is-style-"] .tab-buttons {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.5rem;
  }

  .wp-block-brblocks-tabs[class*="is-style-"] .tab-button {
    white-space: nowrap;
    scroll-snap-align: start;
  }

  
  .wp-block-brblocks-tabs.vertical[class*="is-style-"] {
    flex-direction: column;
  }

  .wp-block-brblocks-tabs.vertical[class*="is-style-"] .tab-buttons {
    flex-direction: row;
    border-right: none;
    padding-right: 0;
                padding-left: 0px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .wp-block-brblocks-tabs.vertical[class*="is-style-"] .tab-button {
    border-left: none !important;
    border-bottom: 2px solid transparent;
    white-space: nowrap;

    &:hover,
    &.active {
      border-bottom: 2px solid #009cde !important;
    }
  }

  .wp-block-brblocks-tabs.vertical[class*="is-style-"] .tab-contents {
    padding: 1rem 0;
  }
}


@media screen and (max-width: 768px) {
  .wp-block-brblocks-tabs.horizontal[class*="is-style-"] {
    display: flex;
    flex-direction: column;
  }

  .wp-block-brblocks-tabs.horizontal[class*="is-style-"] .tab-buttons {
    flex-direction: column;
    border-right: none;
            padding-left: 0px !important;
    padding-bottom: 1rem;
    overflow-x: auto;
  }

  .wp-block-brblocks-tabs.horizontal[class*="is-style-"] .tab-button {
    text-align: left;
    border-left: 4px solid transparent;
    border-bottom: none;

    &:hover,
    &.active {
      border-left: 4px solid #009cde;
      border-bottom: none;
    }
  }

  .wp-block-brblocks-tabs.horizontal[class*="is-style-"] .tab-contents {
    padding: 1rem;
    
  }
}


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