@import url("../tools/x-tabs.css");

.tabbed-set {
  @extend .x-tabs;
  @extend .x-tabs--custom-properties;
}

.tabbed-set > input {
  @extend .x-tabs__toggle;
}
.tabbed-set > .tabbed-content {
  @extend .x-tabs__content;
}
.tabbed-set > label {
  @extend .x-tabs__tab;

  margin-bottom: unset; /* overwrite form.css which core-style.docs loads */
}
.tabbed-set > label:hover {
  @extend .x-tabs__tab--hover;
}

.tabbed-set > input:checked + label {
  @extend .x-tabs__tab--active;
}
.tabbed-set > input:not(:checked) + label {
  @extend .x-tabs__tab--not-active;
}

@media screen {
  .tabbed-set > input:checked + label + .tabbed-content {
    @extend .x-tabs__content--active;
  }
}
@media print {
  .tabbed-content {
    @extend .x-tabs__content--force-active;
  }
}



/* To show focus on container ONLY if a toggle has VISIBLE focus */
/* NOTE: Simple version shows outline even if browser would not do so for inputs

.tabbed-set:focus-within {
  @extend .x-tabs--focus-within;
}

*/
@media screen {
  @supports selector(:has(*)) {
    /* FAQ: The `:where(.tabbed-set > *)` prevents tabs focus UI
            when focusing on an element within the content */
    .tabbed-set:has(input:focus-visible:where(.tabbed-set > *)) {
      @extend .x-tabs--focus-within;
    }
  }

  @supports not selector(:has(*)) {
    .tabbed-set:focus-within {
      @extend .x-tabs--focus-within;
    }
  }
}