@import url("s://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap");

.cir-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  background: var(--color-cloud, #ffffff);
  border: 1px solid var(--color-edge, #e3e8ee);
  border-radius: 999px;
  box-shadow:
    0 1px 1px rgba(14, 17, 22, 0.04),
    0 20px 40px -24px rgba(14, 17, 22, 0.18);
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    sans-serif;
}

.cir-tabs__r {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.cir-tabs__t {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-mist, #5b6472);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color 400ms cubic-bezier(0.22, 1, 0.36, 1),
    color 400ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 400ms cubic-bezier(0.22, 1, 0.36, 1);
    transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cir-tabs__t:hover {
    color: var(--color-ink, #0e1116);
    transform: scale(1.03);
}

.cir-tabs__r:checked + .cir-tabs__t {
  background: var(--color-ink, #0e1116);
  color: var(--color-cloud, #ffffff);
  box-shadow:
    0 1px 1px rgba(14, 17, 22, 0.06),
    0 8px 18px -10px rgba(14, 17, 22, 0.5);
  transform: scale(1.1);
}

.cir-tabs__r:focus-visible + .cir-tabs__t {
  box-shadow: 0 0 0 3px rgba(46, 125, 239, 0.32);
}