/*
 * ==========================================================
 * VIBE UI CORE INTERACTIONS 1.2
 * Tabs / Select / Fields / Loading buttons
 * ==========================================================
 */

/* VIBE_UI_CORE_INTERACTIONS_V12 */

.vb-tabs{
  display:inline-flex;
  align-items:center;
  gap:3px;

  padding:3px;

  border:
    1px solid
    var(--vb-border);

  border-radius:11px;

  background:
    rgba(255,255,255,.025);
}


.vb-tab{
  min-height:30px;

  padding:
    0
    11px;

  border:0;
  border-radius:8px;

  background:transparent;

  color:
    var(--vb-muted);

  font:inherit;
  font-size:13px;
  font-weight:750;

  cursor:pointer;

  transition:
    color
      var(--vb-motion-fast)
      var(--vb-ease),
    background
      var(--vb-motion-fast)
      var(--vb-ease),
    box-shadow
      var(--vb-motion-fast)
      var(--vb-ease);
}


.vb-tab:hover{
  color:
    var(--vb-text);

  background:
    rgba(255,255,255,.04);
}


.vb-tab[aria-selected="true"],
.vb-tab.is-active{
  color:
    var(--vb-text);

  background:
    var(--vb-accent-soft);

  box-shadow:
    inset
    0
    0
    0
    1px
    var(--vb-accent);
}


.vb-field{
  display:flex;
  flex-direction:column;
  gap:7px;

  min-width:0;
}


.vb-label{
  color:
    var(--vb-muted);

  font-size:13px;
  font-weight:750;
}


.vb-field-help{
  color:
    var(--vb-muted);

  font-size:13px;
  line-height:1.45;
}


.vb-select{
  width:100%;
  min-height:38px;

  padding:
    0
    34px
    0
    12px;

  border:
    1px solid
    var(--vb-border);

  border-radius:
    var(--vb-radius-md);

  outline:none;

  background:
    var(--vb-surface);

  color:
    var(--vb-text);

  font:inherit;
  font-size:13px;

  cursor:pointer;

  transition:
    border-color
      var(--vb-motion-fast)
      var(--vb-ease),
    box-shadow
      var(--vb-motion-fast)
      var(--vb-ease);
}


.vb-select:focus{
  border-color:
    var(--vb-accent);

  box-shadow:
    0
    0
    0
    3px
    var(--vb-accent-soft);
}


.vb-button.is-loading{
  position:relative;

  color:transparent !important;

  pointer-events:none;
}


.vb-button.is-loading::after{
  content:"";

  position:absolute;
  inset:0;

  width:13px;
  height:13px;

  margin:auto;

  border:
    2px solid
    currentColor;

  border-top-color:
    transparent;

  border-radius:999px;

  color:
    var(--vb-text);

  animation:
    vb-button-spin
    .7s
    linear
    infinite;
}


@keyframes vb-button-spin{

  to{
    transform:
      rotate(360deg);
  }

}


@media(prefers-reduced-motion:reduce){

  .vb-button.is-loading::after{
    animation:none;
  }

}