Custom tab responsive

Add Custom ID: tabs__style3

Code css

/* style tab */

#tabs__style3 {

  --color__tabs: #A2CBD4;

  --color__tabs--active: #00748d;

}

#tabs__style3 li.brz-tabs__nav--active~li {

  background: var(--color__tabs);

}

#tabs__style3 li.brz-tabs__nav--active~li::before {

  border-left: 16px solid var(--color__tabs);

  border-top: 26px solid transparent;

  border-bottom: 26px solid transparent;

}

#tabs__style3 li.brz-tabs__nav--active~li::after {

  border-left: 16px solid transparent;

  border-top: 26px solid var(--color__tabs);

  border-bottom: 26px solid var(--color__tabs);

  position: absolute;

  top: 50%;

  -webkit-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  transform: translateY(-50%);

}

#tabs__style3 li {

  background: var(--color__tabs--active);

  -webkit-transition: background 0s;

  -o-transition: background 0s;

  transition: background 0s;

}

#tabs__style3 li:not(.brz-tabs__nav--active)::before {

  content: "";

  width: 18px!important;

  border-left: 16px solid var(--color__tabs--active);

  border-top: 26px solid transparent;

  border-bottom: 26px solid transparent;

  position: absolute;

  top: 50%;

  right: -16px;

  -webkit-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  transform: translateY(-50%);

}

#tabs__style3 li.brz-tabs__nav--active > .brz-tabs__nav--button::before {

  content: "";

  width: 18px!important;

  border-left: 16px solid var(--color__tabs--active);

  border-top: 26px solid transparent;

  border-bottom: 26px solid transparent;

  position: absolute;

  top: 50%;

  right: -16px;

  -webkit-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  transform: translateY(-50%);

}

#tabs__style3 li::after {

  content: "";

  width: 18px!important;

  border-left: 16px solid transparent;

  border-top: 26px solid var(--color__tabs--active);

  border-bottom: 26px solid var(--color__tabs--active);

  position: absolute;

  top: 50%;

  left: -16px;

  -webkit-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  transform: translateY(-50%);

  -webkit-transition: border-top 0s;

  -o-transition: border-top 0s;

  transition: border-top 0s;

  -webkit-transition: border-bottom 0s;

  -o-transition: border-bottom 0s;

  transition: border-bottom 0s;

}

#tabs__style3 .brz-tabs__nav--active::before {

  background-color: transparent!important;

}

#tabs__style3 .brz-tabs__nav--active::after {

  background-color: transparent!important;

}

#tabs__style3 .brz-tabs__nav--horizontal {

  display: box!important;

  display: -moz-box!important;

  display: -webkit-box!important;

  box-pack: center!important;

  -moz-box-pack: center!important;

  -webkit-box-pack: center!important;

  min-width: auto!important;

  overflow-x: auto!important;

}

#tabs__style3 .brz-tabs__nav--desktop {

  display: block!important;

}

#tabs__style3 .brz-tabs__nav--mobile,

#tabs__style3 .brz-tabs__items:not(.brz-tabs__items--active) {

  display: none!important;

}

/* scrollbar */

#tabs__style3 .brz-tabs__nav--horizontal::-webkit-scrollbar {

  height: 10px;

}

#tabs__style3 .brz-tabs__nav--horizontal::-webkit-scrollbar-thumb {

  background: rgba(204, 204, 204, 0.5);

  border-radius: 10px;

}