@vsn-ux/gaia-styles 0.6.2 → 0.6.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/all-10pt.css +715 -0
  2. package/dist/all-no-reset-10pt.css +715 -0
  3. package/dist/all-no-reset.css +715 -0
  4. package/dist/all.css +715 -0
  5. package/dist/components/side-navigation.css +842 -0
  6. package/dist/components.css +715 -0
  7. package/dist/docs/SideNavigation.md +524 -0
  8. package/package.json +1 -1
  9. package/src/styles/components/side-navigation.css +351 -0
  10. package/src/styles/components.css +1 -0
package/dist/components.css CHANGED
@@ -3081,6 +3081,721 @@ textarea.ga-text-area {
3081
3081
  }
3082
3082
  }
3083
3083
  }
3084
+ .ga-side-navigation {
3085
+ display: flex;
3086
+ height: 100%;
3087
+ width: calc(0.25rem * 80);
3088
+ flex-direction: column;
3089
+ border-radius: var(--ga-radius);
3090
+ background-color: var(--ga-color-surface-primary);
3091
+ padding: calc(0.25rem * 1);
3092
+ --tw-shadow: var(--ga-shadow-north);
3093
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3094
+ .ga-side-navigation__header {
3095
+ position: relative;
3096
+ z-index: 10;
3097
+ display: flex;
3098
+ flex-shrink: 0;
3099
+ flex-direction: column;
3100
+ }
3101
+ .ga-side-navigation__switcher {
3102
+ position: relative;
3103
+ display: flex;
3104
+ cursor: pointer;
3105
+ align-items: center;
3106
+ justify-content: space-between;
3107
+ gap: calc(0.25rem * 2);
3108
+ border-radius: var(--ga-radius);
3109
+ padding: calc(0.25rem * 3);
3110
+ --tw-outline-style: none;
3111
+ outline-style: none;
3112
+ &:hover {
3113
+ background-color: var(--ga-color-surface-action-hover-2);
3114
+ }
3115
+ &:focus-visible {
3116
+ &::after {
3117
+ position: absolute;
3118
+ inset: 3px;
3119
+ border-radius: var(--ga-radius);
3120
+ border-style: var(--tw-border-style);
3121
+ border-width: 2px;
3122
+ border-color: var(--ga-color-border-focus);
3123
+ --tw-content: '';
3124
+ content: var(--tw-content);
3125
+ }
3126
+ }
3127
+ &:active {
3128
+ .ga-side-navigation__switcher-title {
3129
+ --tw-font-weight: 600;
3130
+ font-weight: 600;
3131
+ }
3132
+ }
3133
+ &.ga-side-navigation__switcher--active {
3134
+ background-color: var(--ga-color-surface-selected);
3135
+ .ga-side-navigation__switcher-title {
3136
+ --tw-font-weight: 600;
3137
+ font-weight: 600;
3138
+ }
3139
+ }
3140
+ }
3141
+ .ga-side-navigation__switcher-title {
3142
+ min-width: calc(0.25rem * 0);
3143
+ flex: 1;
3144
+ overflow: hidden;
3145
+ text-overflow: ellipsis;
3146
+ white-space: nowrap;
3147
+ text-align: left;
3148
+ font-size: calc(
3149
+ var(--ga-text-lg-font-size) * var(--ga-base-scaling-factor, 1)
3150
+ );
3151
+ line-height: var(--tw-leading, calc(
3152
+ var(--ga-text-lg-line-height) * var(--ga-base-scaling-factor, 1)
3153
+ ));
3154
+ letter-spacing: var(--tw-tracking, calc(
3155
+ var(--ga-text-lg-letter-spacing) * var(--ga-base-scaling-factor, 1)
3156
+ ));
3157
+ --tw-font-weight: 500;
3158
+ font-weight: 500;
3159
+ color: var(--ga-color-text-action);
3160
+ }
3161
+ .ga-side-navigation__switcher-action {
3162
+ display: flex;
3163
+ flex-shrink: 0;
3164
+ cursor: pointer;
3165
+ align-items: center;
3166
+ padding-block: calc(0.25rem * 2);
3167
+ color: var(--ga-color-icon-secondary);
3168
+ &:hover {
3169
+ color: var(--ga-color-icon-action);
3170
+ }
3171
+ }
3172
+ .ga-side-navigation__switcher-dropdown {
3173
+ position: absolute;
3174
+ top: 100%;
3175
+ right: calc(0.25rem * 0);
3176
+ left: calc(0.25rem * 0);
3177
+ z-index: 10;
3178
+ display: flex;
3179
+ max-height: calc(0.25rem * 80);
3180
+ flex-direction: column;
3181
+ overflow-y: auto;
3182
+ border-radius: var(--ga-radius);
3183
+ background-color: var(--ga-color-surface-primary);
3184
+ padding-inline: calc(0.25rem * 2);
3185
+ padding-top: calc(0.25rem * 4);
3186
+ padding-bottom: calc(0.25rem * 2);
3187
+ --tw-shadow: var(--ga-shadow-north);
3188
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3189
+ }
3190
+ .ga-side-navigation__switcher-dropdown-header {
3191
+ padding-inline: calc(0.25rem * 4);
3192
+ padding-top: calc(0.25rem * 1);
3193
+ padding-bottom: calc(0.25rem * 1);
3194
+ font-size: calc(
3195
+ var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1)
3196
+ );
3197
+ line-height: var(--tw-leading, calc(
3198
+ var(--ga-text-sm-line-height) * var(--ga-base-scaling-factor, 1)
3199
+ ));
3200
+ letter-spacing: var(--tw-tracking, 0);
3201
+ --tw-font-weight: 600;
3202
+ font-weight: 600;
3203
+ color: var(--ga-color-text-disable-selected);
3204
+ text-transform: uppercase;
3205
+ }
3206
+ .ga-side-navigation__switcher-dropdown-item {
3207
+ position: relative;
3208
+ display: flex;
3209
+ cursor: pointer;
3210
+ align-items: center;
3211
+ gap: calc(0.25rem * 2);
3212
+ border-radius: var(--ga-radius);
3213
+ padding: calc(0.25rem * 4);
3214
+ text-align: left;
3215
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
3216
+ transition-timing-function: var(--tw-ease, ease);
3217
+ transition-duration: var(--tw-duration, 0s);
3218
+ transition-duration: var(--ga-duration-instant);
3219
+ transition-timing-function: var(--ga-easing-standard);
3220
+ &:hover {
3221
+ background-color: var(--ga-color-surface-action-hover-2);
3222
+ }
3223
+ &:focus-visible {
3224
+ --tw-outline-style: none;
3225
+ outline-style: none;
3226
+ &::after {
3227
+ position: absolute;
3228
+ inset: 3px;
3229
+ border-radius: var(--ga-radius);
3230
+ border-style: var(--tw-border-style);
3231
+ border-width: 2px;
3232
+ border-color: var(--ga-color-border-focus);
3233
+ --tw-content: '';
3234
+ content: var(--tw-content);
3235
+ }
3236
+ }
3237
+ &:active {
3238
+ .ga-side-navigation__switcher-dropdown-title {
3239
+ --tw-font-weight: 600;
3240
+ font-weight: 600;
3241
+ }
3242
+ }
3243
+ }
3244
+ .ga-side-navigation__switcher-dropdown-title {
3245
+ min-width: calc(0.25rem * 0);
3246
+ flex: 1;
3247
+ overflow: hidden;
3248
+ text-overflow: ellipsis;
3249
+ white-space: nowrap;
3250
+ text-align: left;
3251
+ font-size: calc(
3252
+ var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
3253
+ );
3254
+ line-height: var(--tw-leading, calc(
3255
+ var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1)
3256
+ ));
3257
+ letter-spacing: var(--tw-tracking, calc(
3258
+ var(--ga-text-md-letter-spacing) * var(--ga-base-scaling-factor, 1)
3259
+ ));
3260
+ --tw-font-weight: 500;
3261
+ font-weight: 500;
3262
+ color: var(--ga-color-text-action);
3263
+ }
3264
+ .ga-side-navigation__switcher-dropdown-external {
3265
+ height: calc(0.25rem * 4);
3266
+ width: calc(0.25rem * 4);
3267
+ flex-shrink: 0;
3268
+ align-self: center;
3269
+ color: var(--ga-color-icon-secondary);
3270
+ }
3271
+ .ga-side-navigation__search {
3272
+ margin-inline: calc(0.25rem * 3);
3273
+ margin-block: calc(0.25rem * 2);
3274
+ &.ga-input {
3275
+ width: auto;
3276
+ &:not(:hover) {
3277
+ border-color: var(--ga-color-surface-page);
3278
+ background-color: var(--ga-color-surface-page);
3279
+ }
3280
+ input::-webkit-search-cancel-button {
3281
+ display: none;
3282
+ }
3283
+ }
3284
+ }
3285
+ .ga-side-navigation__search-shortcut {
3286
+ flex-shrink: 0;
3287
+ cursor: default;
3288
+ border-radius: var(--ga-radius);
3289
+ border-style: var(--tw-border-style);
3290
+ border-width: 1px;
3291
+ border-color: var(--ga-color-border-disabled);
3292
+ background-color: #fff;
3293
+ padding-inline: calc(0.25rem * 1);
3294
+ padding-block: 1px;
3295
+ font-family: Inter, ui-sans-serif, system-ui, sans-serif;
3296
+ font-feature-settings: 'liga' 1, 'calt' 1;
3297
+ font-size: calc(
3298
+ var(--ga-text-xs-font-size) * var(--ga-base-scaling-factor, 1)
3299
+ );
3300
+ line-height: var(--tw-leading, calc(
3301
+ var(--ga-text-xs-line-height) * var(--ga-base-scaling-factor, 1)
3302
+ ));
3303
+ letter-spacing: var(--tw-tracking, calc(
3304
+ var(--ga-text-xs-letter-spacing) * var(--ga-base-scaling-factor, 1)
3305
+ ));
3306
+ color: var(--ga-color-icon-on-disabled);
3307
+ }
3308
+ .ga-side-navigation__body {
3309
+ display: flex;
3310
+ flex: 1;
3311
+ flex-direction: column;
3312
+ overflow-y: auto;
3313
+ padding-inline: calc(0.25rem * 3);
3314
+ padding-block: calc(0.25rem * 2);
3315
+ }
3316
+ .ga-side-navigation__item {
3317
+ position: relative;
3318
+ display: flex;
3319
+ cursor: pointer;
3320
+ flex-direction: row;
3321
+ align-items: center;
3322
+ gap: calc(0.25rem * 3);
3323
+ border-radius: var(--ga-radius);
3324
+ padding-inline: calc(0.25rem * 4);
3325
+ padding-block: calc(0.25rem * 3);
3326
+ text-align: left;
3327
+ font-size: calc(
3328
+ var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
3329
+ );
3330
+ line-height: var(--tw-leading, calc(
3331
+ var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1)
3332
+ ));
3333
+ letter-spacing: var(--tw-tracking, calc(
3334
+ var(--ga-text-md-letter-spacing) * var(--ga-base-scaling-factor, 1)
3335
+ ));
3336
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
3337
+ transition-timing-function: var(--tw-ease, ease);
3338
+ transition-duration: var(--tw-duration, 0s);
3339
+ transition-duration: var(--ga-duration-instant);
3340
+ transition-timing-function: var(--ga-easing-standard);
3341
+ &:hover {
3342
+ background-color: var(--ga-color-surface-action-hover-2);
3343
+ }
3344
+ &:focus, &:focus-visible {
3345
+ --tw-outline-style: none;
3346
+ outline-style: none;
3347
+ }
3348
+ &:active:not(.ga-side-navigation__item--disabled) {
3349
+ .ga-side-navigation__item-label {
3350
+ --tw-font-weight: 500;
3351
+ font-weight: 500;
3352
+ }
3353
+ }
3354
+ &.ga-side-navigation__item--active {
3355
+ background-color: var(--ga-color-surface-selected);
3356
+ &::before {
3357
+ position: absolute;
3358
+ top: calc(1 / 2 * 100%);
3359
+ left: calc(0.25rem * 0);
3360
+ height: calc(0.25rem * 8);
3361
+ width: calc(0.25rem * 1);
3362
+ --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
3363
+ translate: var(--tw-translate-x) var(--tw-translate-y);
3364
+ border-top-right-radius: var(--ga-radius);
3365
+ border-bottom-right-radius: var(--ga-radius);
3366
+ background-color: var(--ga-color-surface-action);
3367
+ --tw-content: '';
3368
+ content: var(--tw-content);
3369
+ }
3370
+ .ga-side-navigation__item-label {
3371
+ --tw-font-weight: 600;
3372
+ font-weight: 600;
3373
+ }
3374
+ }
3375
+ &.ga-side-navigation__item--expanded {
3376
+ .ga-side-navigation__item-label {
3377
+ --tw-font-weight: 600;
3378
+ font-weight: 600;
3379
+ }
3380
+ }
3381
+ &.ga-side-navigation__item--disabled {
3382
+ cursor: not-allowed;
3383
+ &:hover {
3384
+ background-color: transparent;
3385
+ }
3386
+ .ga-side-navigation__item-icon {
3387
+ color: var(--ga-color-icon-disabled);
3388
+ }
3389
+ .ga-side-navigation__item-label {
3390
+ color: var(--ga-color-text-disabled);
3391
+ }
3392
+ }
3393
+ }
3394
+ .ga-side-navigation__item--level-2 {
3395
+ padding-left: calc(0.25rem * 8);
3396
+ }
3397
+ .ga-side-navigation__item--level-3 {
3398
+ padding-left: calc(0.25rem * 14);
3399
+ }
3400
+ .ga-side-navigation__item--level-4 {
3401
+ padding-left: calc(0.25rem * 20);
3402
+ }
3403
+ .ga-side-navigation__item-icon {
3404
+ height: calc(0.25rem * 4);
3405
+ width: calc(0.25rem * 4);
3406
+ flex-shrink: 0;
3407
+ color: var(--ga-color-icon-primary);
3408
+ }
3409
+ .ga-side-navigation__item-content {
3410
+ display: flex;
3411
+ min-width: calc(0.25rem * 0);
3412
+ flex: 1;
3413
+ flex-direction: column;
3414
+ }
3415
+ .ga-side-navigation__item-label {
3416
+ overflow: hidden;
3417
+ text-overflow: ellipsis;
3418
+ white-space: nowrap;
3419
+ font-size: calc(
3420
+ var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
3421
+ );
3422
+ line-height: var(--tw-leading, calc(
3423
+ var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1)
3424
+ ));
3425
+ letter-spacing: var(--tw-tracking, calc(
3426
+ var(--ga-text-md-letter-spacing) * var(--ga-base-scaling-factor, 1)
3427
+ ));
3428
+ color: var(--ga-color-text-action);
3429
+ }
3430
+ .ga-side-navigation__item-description {
3431
+ overflow: hidden;
3432
+ text-overflow: ellipsis;
3433
+ white-space: nowrap;
3434
+ font-size: calc(
3435
+ var(--ga-text-xs-font-size) * var(--ga-base-scaling-factor, 1)
3436
+ );
3437
+ line-height: var(--tw-leading, calc(
3438
+ var(--ga-text-xs-line-height) * var(--ga-base-scaling-factor, 1)
3439
+ ));
3440
+ letter-spacing: var(--tw-tracking, calc(
3441
+ var(--ga-text-xs-letter-spacing) * var(--ga-base-scaling-factor, 1)
3442
+ ));
3443
+ color: var(--ga-color-text-secondary);
3444
+ }
3445
+ .ga-side-navigation__item-external {
3446
+ height: calc(0.25rem * 4);
3447
+ width: calc(0.25rem * 4);
3448
+ flex-shrink: 0;
3449
+ align-self: center;
3450
+ color: var(--ga-color-icon-secondary);
3451
+ }
3452
+ .ga-side-navigation__recent-title {
3453
+ padding-inline: calc(0.25rem * 4);
3454
+ padding-block: calc(0.25rem * 3);
3455
+ font-size: calc(
3456
+ var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1)
3457
+ );
3458
+ line-height: var(--tw-leading, calc(
3459
+ var(--ga-text-sm-line-height) * var(--ga-base-scaling-factor, 1)
3460
+ ));
3461
+ letter-spacing: var(--tw-tracking, 0);
3462
+ --tw-font-weight: 500;
3463
+ font-weight: 500;
3464
+ color: var(--ga-color-text-disable-selected);
3465
+ text-transform: uppercase;
3466
+ }
3467
+ .ga-side-navigation__recent-item {
3468
+ position: relative;
3469
+ display: flex;
3470
+ cursor: pointer;
3471
+ flex-direction: row;
3472
+ align-items: center;
3473
+ gap: calc(0.25rem * 3);
3474
+ border-radius: var(--ga-radius);
3475
+ padding-block: calc(0.25rem * 2);
3476
+ padding-left: calc(0.25rem * 4);
3477
+ text-align: left;
3478
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
3479
+ transition-timing-function: var(--tw-ease, ease);
3480
+ transition-duration: var(--tw-duration, 0s);
3481
+ transition-duration: var(--ga-duration-instant);
3482
+ transition-timing-function: var(--ga-easing-standard);
3483
+ &:hover {
3484
+ background-color: var(--ga-color-surface-action-hover-2);
3485
+ }
3486
+ &:focus, &:focus-visible {
3487
+ --tw-outline-style: none;
3488
+ outline-style: none;
3489
+ }
3490
+ }
3491
+ .ga-side-navigation__recent-item-icon {
3492
+ flex-shrink: 0;
3493
+ color: var(--ga-color-icon-primary);
3494
+ }
3495
+ .ga-side-navigation__recent-item-content {
3496
+ display: flex;
3497
+ min-width: calc(0.25rem * 0);
3498
+ flex-direction: column;
3499
+ }
3500
+ .ga-side-navigation__recent-item-label {
3501
+ overflow: hidden;
3502
+ text-overflow: ellipsis;
3503
+ white-space: nowrap;
3504
+ font-size: calc(
3505
+ var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
3506
+ );
3507
+ line-height: var(--tw-leading, calc(
3508
+ var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1)
3509
+ ));
3510
+ letter-spacing: var(--tw-tracking, calc(
3511
+ var(--ga-text-md-letter-spacing) * var(--ga-base-scaling-factor, 1)
3512
+ ));
3513
+ --tw-leading: calc(0.25rem * 6);
3514
+ line-height: calc(0.25rem * 6);
3515
+ --tw-font-weight: 500;
3516
+ font-weight: 500;
3517
+ color: var(--ga-color-text-action);
3518
+ }
3519
+ .ga-side-navigation__recent-item-description {
3520
+ overflow: hidden;
3521
+ text-overflow: ellipsis;
3522
+ white-space: nowrap;
3523
+ font-size: calc(
3524
+ var(--ga-text-xs-font-size) * var(--ga-base-scaling-factor, 1)
3525
+ );
3526
+ line-height: var(--tw-leading, calc(
3527
+ var(--ga-text-xs-line-height) * var(--ga-base-scaling-factor, 1)
3528
+ ));
3529
+ letter-spacing: var(--tw-tracking, calc(
3530
+ var(--ga-text-xs-letter-spacing) * var(--ga-base-scaling-factor, 1)
3531
+ ));
3532
+ color: var(--ga-color-text-on-disabled);
3533
+ }
3534
+ .ga-side-navigation__search-results-title {
3535
+ padding-inline: calc(0.25rem * 6);
3536
+ font-size: calc(
3537
+ var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1)
3538
+ );
3539
+ line-height: var(--tw-leading, calc(
3540
+ var(--ga-text-sm-line-height) * var(--ga-base-scaling-factor, 1)
3541
+ ));
3542
+ letter-spacing: var(--tw-tracking, 0);
3543
+ --tw-leading: calc(0.25rem * 6);
3544
+ line-height: calc(0.25rem * 6);
3545
+ --tw-font-weight: 500;
3546
+ font-weight: 500;
3547
+ color: var(--ga-color-text-disable-selected);
3548
+ }
3549
+ .ga-side-navigation__search-results-item {
3550
+ position: relative;
3551
+ margin-inline: calc(0.25rem * 3);
3552
+ display: flex;
3553
+ cursor: pointer;
3554
+ flex-direction: row;
3555
+ align-items: center;
3556
+ gap: calc(0.25rem * 3);
3557
+ border-radius: var(--ga-radius);
3558
+ padding-inline: calc(0.25rem * 3);
3559
+ padding-block: calc(0.25rem * 2);
3560
+ text-align: left;
3561
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
3562
+ transition-timing-function: var(--tw-ease, ease);
3563
+ transition-duration: var(--tw-duration, 0s);
3564
+ transition-duration: var(--ga-duration-instant);
3565
+ transition-timing-function: var(--ga-easing-standard);
3566
+ &:hover {
3567
+ background-color: var(--ga-color-surface-action-hover-2);
3568
+ }
3569
+ &:focus-visible {
3570
+ --tw-outline-style: none;
3571
+ outline-style: none;
3572
+ &::after {
3573
+ position: absolute;
3574
+ inset: 3px;
3575
+ border-radius: var(--ga-radius);
3576
+ border-style: var(--tw-border-style);
3577
+ border-width: 2px;
3578
+ border-color: var(--ga-color-border-focus);
3579
+ --tw-content: '';
3580
+ content: var(--tw-content);
3581
+ }
3582
+ }
3583
+ }
3584
+ .ga-side-navigation__search-results-item-content {
3585
+ display: flex;
3586
+ min-width: calc(0.25rem * 0);
3587
+ flex: 1;
3588
+ flex-direction: column;
3589
+ }
3590
+ .ga-side-navigation__search-results-item-label {
3591
+ overflow: hidden;
3592
+ text-overflow: ellipsis;
3593
+ white-space: nowrap;
3594
+ font-size: calc(
3595
+ var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
3596
+ );
3597
+ line-height: var(--tw-leading, calc(
3598
+ var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1)
3599
+ ));
3600
+ letter-spacing: var(--tw-tracking, calc(
3601
+ var(--ga-text-md-letter-spacing) * var(--ga-base-scaling-factor, 1)
3602
+ ));
3603
+ --tw-leading: calc(0.25rem * 6);
3604
+ line-height: calc(0.25rem * 6);
3605
+ --tw-font-weight: 500;
3606
+ font-weight: 500;
3607
+ color: var(--ga-color-text-action);
3608
+ }
3609
+ .ga-side-navigation__search-results-item-description {
3610
+ overflow: hidden;
3611
+ text-overflow: ellipsis;
3612
+ white-space: nowrap;
3613
+ font-size: calc(
3614
+ var(--ga-text-xs-font-size) * var(--ga-base-scaling-factor, 1)
3615
+ );
3616
+ line-height: var(--tw-leading, calc(
3617
+ var(--ga-text-xs-line-height) * var(--ga-base-scaling-factor, 1)
3618
+ ));
3619
+ letter-spacing: var(--tw-tracking, calc(
3620
+ var(--ga-text-xs-letter-spacing) * var(--ga-base-scaling-factor, 1)
3621
+ ));
3622
+ color: var(--ga-color-text-on-disabled);
3623
+ }
3624
+ .ga-side-navigation__search-results-item-external {
3625
+ height: calc(0.25rem * 4);
3626
+ width: calc(0.25rem * 4);
3627
+ flex-shrink: 0;
3628
+ align-self: center;
3629
+ color: var(--ga-color-icon-secondary);
3630
+ }
3631
+ .ga-side-navigation__footer {
3632
+ position: relative;
3633
+ z-index: 10;
3634
+ flex-shrink: 0;
3635
+ border-top-style: var(--tw-border-style);
3636
+ border-top-width: 1px;
3637
+ border-color: var(--ga-color-border-tertiary);
3638
+ padding-top: calc(0.25rem * 1);
3639
+ }
3640
+ .ga-side-navigation__user {
3641
+ position: relative;
3642
+ display: flex;
3643
+ cursor: pointer;
3644
+ align-items: center;
3645
+ gap: calc(0.25rem * 3);
3646
+ border-radius: var(--ga-radius);
3647
+ padding-inline: calc(0.25rem * 4);
3648
+ padding-block: calc(0.25rem * 3);
3649
+ --tw-outline-style: none;
3650
+ outline-style: none;
3651
+ &:hover {
3652
+ background-color: var(--ga-color-surface-action-hover-2);
3653
+ }
3654
+ &:focus-visible {
3655
+ &::after {
3656
+ position: absolute;
3657
+ inset: 3px;
3658
+ border-radius: var(--ga-radius);
3659
+ border-style: var(--tw-border-style);
3660
+ border-width: 2px;
3661
+ border-color: var(--ga-color-border-focus);
3662
+ --tw-content: '';
3663
+ content: var(--tw-content);
3664
+ }
3665
+ }
3666
+ &.ga-side-navigation__user--active {
3667
+ background-color: var(--ga-color-surface-selected);
3668
+ }
3669
+ }
3670
+ .ga-side-navigation__user-avatar {
3671
+ height: calc(0.25rem * 10);
3672
+ width: calc(0.25rem * 10);
3673
+ flex-shrink: 0;
3674
+ border-radius: calc(infinity * 1px);
3675
+ }
3676
+ .ga-side-navigation__user-name {
3677
+ flex: 1;
3678
+ overflow: hidden;
3679
+ text-overflow: ellipsis;
3680
+ white-space: nowrap;
3681
+ font-size: calc(
3682
+ var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
3683
+ );
3684
+ line-height: var(--tw-leading, calc(
3685
+ var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1)
3686
+ ));
3687
+ letter-spacing: var(--tw-tracking, calc(
3688
+ var(--ga-text-md-letter-spacing) * var(--ga-base-scaling-factor, 1)
3689
+ ));
3690
+ --tw-font-weight: 500;
3691
+ font-weight: 500;
3692
+ color: var(--ga-color-text-body);
3693
+ }
3694
+ .ga-side-navigation__user-action {
3695
+ display: flex;
3696
+ flex-shrink: 0;
3697
+ cursor: pointer;
3698
+ align-items: center;
3699
+ color: var(--ga-color-icon-secondary);
3700
+ &:hover {
3701
+ color: var(--ga-color-icon-action);
3702
+ }
3703
+ }
3704
+ .ga-side-navigation__footer-dropdown {
3705
+ position: absolute;
3706
+ right: calc(0.25rem * 0);
3707
+ bottom: 100%;
3708
+ left: calc(0.25rem * 0);
3709
+ z-index: 10;
3710
+ display: flex;
3711
+ max-height: calc(0.25rem * 80);
3712
+ flex-direction: column;
3713
+ overflow-y: auto;
3714
+ border-radius: var(--ga-radius);
3715
+ background-color: var(--ga-color-surface-primary);
3716
+ padding: calc(0.25rem * 3);
3717
+ --tw-shadow: var(--ga-shadow-south);
3718
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3719
+ }
3720
+ .ga-side-navigation__footer-dropdown-item {
3721
+ position: relative;
3722
+ display: flex;
3723
+ cursor: pointer;
3724
+ align-items: center;
3725
+ gap: calc(0.25rem * 3);
3726
+ border-radius: var(--ga-radius);
3727
+ padding-block: calc(0.25rem * 3);
3728
+ padding-right: calc(0.25rem * 2);
3729
+ padding-left: calc(0.25rem * 4);
3730
+ text-align: left;
3731
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
3732
+ transition-timing-function: var(--tw-ease, ease);
3733
+ transition-duration: var(--tw-duration, 0s);
3734
+ transition-duration: var(--ga-duration-instant);
3735
+ transition-timing-function: var(--ga-easing-standard);
3736
+ &:hover {
3737
+ background-color: var(--ga-color-surface-action-hover-2);
3738
+ }
3739
+ &:focus-visible {
3740
+ --tw-outline-style: none;
3741
+ outline-style: none;
3742
+ &::after {
3743
+ position: absolute;
3744
+ inset: 3px;
3745
+ border-radius: var(--ga-radius);
3746
+ border-style: var(--tw-border-style);
3747
+ border-width: 2px;
3748
+ border-color: var(--ga-color-border-focus);
3749
+ --tw-content: '';
3750
+ content: var(--tw-content);
3751
+ }
3752
+ }
3753
+ &:active {
3754
+ .ga-side-navigation__footer-dropdown-title {
3755
+ --tw-font-weight: 600;
3756
+ font-weight: 600;
3757
+ }
3758
+ }
3759
+ &.ga-side-navigation__footer-dropdown-item--disabled {
3760
+ cursor: not-allowed;
3761
+ &:hover {
3762
+ background-color: transparent;
3763
+ }
3764
+ .ga-side-navigation__footer-dropdown-icon {
3765
+ color: var(--ga-color-icon-disabled);
3766
+ }
3767
+ .ga-side-navigation__footer-dropdown-title {
3768
+ color: var(--ga-color-text-disabled);
3769
+ }
3770
+ }
3771
+ }
3772
+ .ga-side-navigation__footer-dropdown-icon {
3773
+ height: calc(0.25rem * 4);
3774
+ width: calc(0.25rem * 4);
3775
+ flex-shrink: 0;
3776
+ color: var(--ga-color-icon-primary);
3777
+ }
3778
+ .ga-side-navigation__footer-dropdown-title {
3779
+ min-width: calc(0.25rem * 0);
3780
+ flex: 1;
3781
+ overflow: hidden;
3782
+ text-overflow: ellipsis;
3783
+ white-space: nowrap;
3784
+ text-align: left;
3785
+ font-size: calc(
3786
+ var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
3787
+ );
3788
+ line-height: var(--tw-leading, calc(
3789
+ var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1)
3790
+ ));
3791
+ letter-spacing: var(--tw-tracking, calc(
3792
+ var(--ga-text-md-letter-spacing) * var(--ga-base-scaling-factor, 1)
3793
+ ));
3794
+ --tw-font-weight: 500;
3795
+ font-weight: 500;
3796
+ color: var(--ga-color-text-action);
3797
+ }
3798
+ }
3084
3799
  @property --tw-border-style {
3085
3800
  syntax: "*";
3086
3801
  inherits: false;