@lunalytics/ui/dist/assets/tabs.css

React based component library created to be used in Lunalytics

body{font-size:var(--lunaui-size-md);font-weight:var(--lunaui-weight-medium);line-height:1.5;color:var(--lunaui-text-color);isolation:isolate}.luna-tabs{display:flex;flex-direction:row}.luna-tabs:first-child{border:none}.luna-tabs-item{border:.0625rem solid var(--lunaui-accent-700);padding:.5rem .75rem}.luna-tabs-item:hover{cursor:pointer;background-color:var(--lunaui-accent-700);color:var(--lunaui-accent-100);transition:all .2s ease-in-out}.luna-tabs-item.theme-dark{color:var(--lunaui-text-dark-font)}.luna-tabs-item.theme-light{color:var(--lunaui-white)}.luna-tabs-item.primary{--tab-background: var(--lunaui-primary-800);--tab-font: var(--lunaui-primary-700);--tab-border: var(--lunaui-primary-800)}.luna-tabs-item.red{--tab-background: var(--lunaui-red-800);--tab-font: var(--lunaui-red-700);--tab-border: var(--lunaui-red-800)}.luna-tabs-item.green{--tab-background: var(--lunaui-green-800);--tab-font: var(--lunaui-green-700);--tab-border: var(--lunaui-green-800)}.luna-tabs-item.yellow{--tab-background: var(--lunaui-yellow-800);--tab-font: var(--lunaui-yellow-700);--tab-border: var(--lunaui-yellow-800)}.luna-tabs-item.blue{--tab-background: var(--lunaui-blue-800);--tab-font: var(--lunaui-blue-700);--tab-border: var(--lunaui-blue-800)}.luna-tabs-item.purple{--tab-background: var(--lunaui-purple-800);--tab-font: var(--lunaui-purple-700);--tab-border: var(--lunaui-purple-800)}.luna-tabs-item.cyan{--tab-background: var(--lunaui-cyan-800);--tab-font: var(--lunaui-cyan-700);--tab-border: var(--lunaui-cyan-800)}.luna-tabs-item.gray{--tab-background: var(--lunaui-gray-800);--tab-font: var(--lunaui-white);--tab-border: var(--lunaui-gray-800)}.luna-tabs-item.pink{--tab-background: var(--lunaui-pink-800);--tab-font: var(--lunaui-pink-700);--tab-border: var(--lunaui-pink-800)}.luna-tabs-item.solid{color:var(--lunaui-text-color);background-color:var(--tab-background);border:1px solid var(--tab-border)}.luna-tabs-item.solid:hover{background-color:color-mix(in srgb,var(--tab-background),transparent 20%);color:var(--lunaui-text-color)}.luna-tabs-item.border{color:var(--tab-font);border:2px solid var(--tab-border)}.luna-tabs-item.border:hover{background-color:var(--tab-background);color:var(--lunaui-text-color)}.luna-tabs-item.light{color:var(--tab-font)}.luna-tabs-item.light:hover{background-color:color-mix(in srgb,var(--tab-background),transparent 66%)}.luna-tabs-item.flat{color:var(--tab-font);background-color:color-mix(in srgb,var(--tab-background),transparent 66%);border:1px solid var(--tab-border)}.luna-tabs-item.flat:hover{background-color:var(--tab-background);color:var(--lunaui-text-color)}.luna-tabs-item.shadow{background-color:var(--tab-background);box-shadow:0 2px 5px var(--tab-background);border:none}.luna-tabs-item.shadow:hover{box-shadow:0 4px 12px var(--tab-background)}.luna-tabs-item:first-child{border-radius:var(--lunaui-radius-sm) 0 0 var(--lunaui-radius-sm)}.luna-tabs-item:last-child{border-radius:0 var(--lunaui-radius-sm) var(--lunaui-radius-sm) 0}.luna-tabs-item:not(:last-child){border-right:none}