ranks

packages/website/src/components/SegmentedControl/index.module.css

@@ -0,0 +1,54 @@
+.options {
+  position: relative;
+  display: grid;
+
+  border-radius: var(--radius-max);
+
+  background-color: var(--gray-3);
+
+  .indicator {
+    position: absolute;
+    top: 0;
+    height: 100%;
+
+    background-color: var(--accent-3);
+    outline: var(--outline-focus);
+    border-radius: var(--radius-max);
+
+    transition: var(--duration-brief);
+  }
+
+  .option {
+    position: relative;
+
+    display: flex;
+    justify-content: center;
+
+    padding: var(--space-3) var(--space-4);
+
+    color: var(--gray-11);
+    cursor: pointer;
+
+    input {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      margin: 0;
+      opacity: 0;
+    }
+
+    .label {
+      white-space: nowrap;
+    }
+
+    &:has(input:checked) {
+      color: var(--gray-12);
+    }
+
+    &:has(input:focus-visible) {
+      outline: 2px solid var(--accent-8);
+      outline-offset: 2px;
+      border-radius: var(--radius-max);
+    }
+  }
+}