.h-tab {
  container-type: inline-size;
  width: 100%;

  .tab-title {
    --btn-txt: var(--txt);
    --btn-bg: var(--input-def-bg);
    font-size: var(--fs-l);
    justify-content: space-between!important;

    &.brx-open {color: var(--prm-500);

      .dtl-ic {
        background: var(--prm-400);
        & .r-ic,& .l-ic {background: var(--prm-100)}
      }
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --btn-bg: var(--input-actn-bg)!important;
        --btn-txt: var(--prm-500)!important;
        box-shadow: var(--strk-h);

        & .dtl-ic {
          background: var(--prm-500);
          & .r-ic,& .l-ic {background: var(--prm-300)}
        }
      }
    }
    &:focus-visible {
        --btn-bg: var(--input-actn-bg);
        --btn-txt: var(--prm-500);
        box-shadow: var(--strk-h);

        & .dtl-ic {
          background: var(--prm-500);
          & .r-ic,& .l-ic {background: var(--prm-300)}
        }
      }
  }
}

.tab-menu {width: 100%}

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

    &.brx-open {
      display: flex;
      flex-direction: column;
      animation: fadeIn var(--trs-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)
  }
}

@container (width < 35em) {
  .tab-content,.tab-menu {display: contents !important}
  .tab-title,.tab-pane {padding: var(--n-xl) !important}
  .tab-pane {padding: 0 var(--n-xl) !important}
}