@scope(.horizontal-tabs,.vertical-tabs) {
  :scope {
    width: 100%;
    max-width: 36rem;
    margin: 10% auto;
    padding: 0.5rem;
  }

  .ui-tablist {
    display: flex;
    border-radius: 1rem;
    background-color: #6383dd;
    padding: 0.5rem;
    color: #111;
  }
  .ui-tablist > .ui-tab:not([hidden]) ~ .ui-tab:not([hidden]) {
    margin-left: 0.5rem;
  }
  .ui-tab {
    width: 100%;
    border-radius: 0.5rem;
    color: #222;
    background-color: rgb(255 255 255 / 0.7);
    padding: 0.75rem 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
  }
  .ui-tab:focus {
    outline: 2px solid rgb(255 255 255 / 0.8);
    outline-offset: 2px;
  }
  .ui-tab.ui-selected {
    background-color: white;
    color: black;
  }
  .ui-tab.ui-disabled {
    background-color: rgb(255 255 255 / 0.5);
    color: #666;
    cursor: default;
  }
  .ui-tab:hover:not(.ui-selected, .ui-disabled),
  .ui-tab:focus:not(.ui-selected, .ui-disabled) {
    background-color: rgb(255 255 255 / 0.8);
  }
  .ui-tabpanel {
    margin-top: 0.5rem;
    border-radius: 1rem;
    background-color: rgb(254 254 254);
    border: 2px solid rgb(59 130 246 / 0.8);
    padding: 0.1rem;
    min-height: 8rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ui-tabpanel:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }
  .ui-tabpanel.ui-hidden {
    display: none;
  }
  .ui-tabpanel b {
    font-weight: bold;
  }

  .ui-tabselect {
    display: block;
    width: 100%;
    border-radius: 0.5rem;
    border-width: 1px;
    border-color: rgb(209 213 219);
    background-color: rgb(249 250 251);
    padding: 0.5rem;
    font-size: 1rem;
    line-height: 1.25rem;
    color: rgb(17 24 39);
    margin-bottom: 0.5rem;
  }
  .ui-tabselect:focus {
    border-color: rgb(59 130 246);
  }
  .ui-tabselect:is(.dark *) {
    border-color: rgb(75 85 99);
    background-color: rgb(55 65 81);
    color: rgb(255 255 255);
  }
  .ui-tabselect:is(.dark *)::-moz-placeholder {
    color: rgb(156 163 175);
  }
  .ui-tabselect:is(.dark *):-ms-input-placeholder {
    color: rgb(156 163 175);
  }
  .ui-tabselect:is(.dark *)::placeholder {
    color: rgb(156 163 175);
  }
  .ui-tabselect:is(.dark *):focus {
    border-color: rgb(59 130 246);
  }
}

@scope(.vertical-tabs) {
  .ui-tabgroup {
    display: flex;
  }
  .ui-tablist {
    flex-direction: column;
    width: 10rem;
    border-radius: 1rem 0 0 1rem;
    padding-right: 0;
  }
  .ui-tablist > .ui-tab:not([hidden]) ~ .ui-tab:not([hidden]) {
    margin: 0.5rem 0 0 0;
  }
  .ui-tab {
    border-radius: 0.5rem 0 0 0.5rem;
    padding: 1rem;
  }
  .ui-tabpanel {
    margin: 0;
    border-radius: 0 1rem 1rem 0;
    padding: 2rem;
    min-width: 24rem;
  }
}