:root
{
    --tbs-bg:var(--prm-1);
    --tbs-hvr-txt:var(--prm-5);
    --tbs-atv-bg:var(--prm-2);
    --tbs-txt-sz:var(--b1);
    --tbs-p:var(--n-xl) var(--gpm-xl);
    --tbs-br:var(--br-l);
}

.tabys {
  container-type: inline-size;
  width: 100%;
}

  .tab-title {
    background: var(--tbs-bg);
    font-size: var(--tbs-txt-sz);
    padding: var(--tbs-p);
    border-radius: var(--tbs-br);
    transition: var(--trans-2);

    &.brx-open {background: var(--tbs-atv-bg);color: var(--tbs-hvr-txt);font-weight: var(--font-w500);

      .dtl-ic {
        background: var(--prm-4);
        & .r-ic,& .l-ic {background: var(--ntl-1)}
      }
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover,&:focus-visible {box-shadow: var(--shd-fcs); color:var(--tbs-hvr-txt);
        & .dtl-ic {background: var(--prm-4);
          & .r-ic,& .l-ic {background: var(--ntl-1)}
        }
      }
    }
}

.tab-menu {width: 100%}

.brxe-tabs-nested {
  & .tab-pane {
    display: none;

    &.brx-open {
      display: flex;
      flex-direction: column;
      animation: fadeIn var(--time-2) ease-in-out
    }
  }
}

@starting-style {
  .brxe-tabs-nested .tab-pane.brx-open {
    opacity: 0;
    transform: translateY(var(--n-xl))
  }
}

@keyframes fadeIn {
  from {opacity: 0;transform: translateY(var(--n-xl))}
  to {opacity: 1;transform: translateY(0)}
}

.h-tbs{.dtl-ic{rotate:-90deg}}
@container (width < 35em) {
  .h-tbs{.dtl-ic{rotate:0deg}}
  .tab-content,.tab-menu {display: contents !important}
  .tab-title {padding: var(--n-xl) !important}
}