packages/styles/scss/components/_apps-dropdown.scss

   1 .apps-dropdown {
   2         &-button {
   3                 @extend .interactive;
   4
   5                 border-radius: var(--border-radius-md);
   6                 border: 1px solid transparent;
   7                 margin-inline-end: rem(-4);
   8                 inline-size: rem(36);
   9                 block-size: rem(36);
  10                 color: var(--text-weak);
  11
  12                 &:hover {
  13                         color: var(--text-norm);
  14                 }
  15         }
  16
  17         .dropdown-content ul {
  18                 display: grid;
  19                 grid-template-columns: repeat(var(--apps-dropdown-repeat), 1fr);
  20                 gap: var(--space-6);
  21                 justify-items: center;
  22         }
  23
  24         .apps-dropdown-app-name,
  25         .apps-dropdown-logo-wrapper {
  26                 transition: 0.25s ease;
  27         }
  28
  29         .apps-dropdown-link {
  30                 &:hover {
  31                         .apps-dropdown-app-name {
  32                                 color: var(--text-norm);
  33                         }
  34
  35                         .apps-dropdown-logo-wrapper {
  36                                 background-color: var(--interaction-default-hover);
  37                         }
  38                 }
  39
  40                 &,
  41                 &:hover,
  42                 &:focus,
  43                 &:active {
  44                         &[aria-current] {
  45                                 pointer-events: auto;
  46                                 background-color: transparent;
  47                         }
  48                 }
  49
  50                 @supports not selector(:focus-visible:has(a, b)) {
  51                         &:focus,
  52                         &:focus-within {
  53                                 .apps-dropdown-logo-wrapper {
  54                                         border-color: var(--focus-outline);
  55                                         box-shadow: 0 0 0 #{$focus-ring-size} var(--focus-ring);
  56                                         color: var(--text-norm);
  57
  58                                         &:hover {
  59                                                 background-color: var(--interaction-default-hover);
  60                                         }
  61                                 }
  62                         }
  63                 }
  64
  65                 @supports selector(:focus-visible:has(a, b)) {
  66                         &:focus-visible,
  67                         &:has(*:focus-visible) {
  68                                 .apps-dropdown-logo-wrapper {
  69                                         border-color: var(--focus-outline);
  70                                         box-shadow: 0 0 0 #{$focus-ring-size} var(--focus-ring);
  71                                         color: var(--text-norm);
  72
  73                                         &:hover {
  74                                                 background-color: var(--interaction-default-hover);
  75                                         }
  76                                 }
  77                         }
  78                 }
  79         }
  80 }