| @@ -1,5 +1,5 @@ | ||
| 1 | -$bg-color: hsl(0deg 0% 20% / 90%); | |
| 1 | +@use 'theme'; | |
| 2 | 2 | |
| 3 | 3 | .tooltip { |
| 4 | 4 | position: relative; |
| 5 | 5 | display: inline-block; |
| @@ -21,9 +21,9 @@ | ||
| 21 | 21 | box-shadow: none; |
| 22 | 22 | } |
| 23 | 23 | |
| 24 | 24 | &:focus-visible { |
| 25 | - outline: 2px solid #2271b1; | |
| 25 | + outline: 2px solid var(--cs-color-accent); | |
| 26 | 26 | outline-offset: 2px; |
| 27 | 27 | } |
| 28 | 28 | } |
| 29 | 29 | |
| @@ -56,16 +56,18 @@ | ||
| 56 | 56 | |
| 57 | 57 | .tooltip-content { |
| 58 | 58 | z-index: 1000; |
| 59 | 59 | padding: 8px; |
| 60 | - background-color: $bg-color; | |
| 60 | + background-color: var(--cs-tooltip-background-color); | |
| 61 | 61 | color: #fff; |
| 62 | - border-radius: 6px; | |
| 62 | + border-radius: 5px; | |
| 63 | 63 | position: absolute; |
| 64 | - font-size: small; | |
| 64 | + font-size: 12px; | |
| 65 | 65 | font-weight: normal; |
| 66 | 66 | text-transform: none; |
| 67 | - min-inline-size: 200px; | |
| 67 | + white-space: normal; | |
| 68 | + inline-size: max-content; | |
| 69 | + max-inline-size: 200px; | |
| 68 | 70 | backdrop-filter: blur(3px); |
| 69 | 71 | |
| 70 | 72 | .tooltip-block & { |
| 71 | 73 | margin-inline-start: -80px; |
| @@ -84,9 +86,9 @@ | ||
| 84 | 86 | .tooltip-block.tooltip-start { |
| 85 | 87 | &::before { |
| 86 | 88 | margin-inline-start: -6px; |
| 87 | 89 | margin-block-end: -12px; |
| 88 | - border-block-start-color: $bg-color; | |
| 90 | + border-block-start-color: var(--cs-tooltip-background-color); | |
| 89 | 91 | } |
| 90 | 92 | |
| 91 | 93 | &::before, .tooltip-content { |
| 92 | 94 | inset-block-end: 100%; |
| @@ -97,9 +99,9 @@ | ||
| 97 | 99 | .tooltip-block.tooltip-end { |
| 98 | 100 | &::before { |
| 99 | 101 | margin-block: -12px 0; |
| 100 | 102 | border-block-start-color: transparent; |
| 101 | - border-block-end-color: $bg-color; | |
| 103 | + border-block-end-color: var(--cs-tooltip-background-color); | |
| 102 | 104 | } |
| 103 | 105 | |
| 104 | 106 | &::before, .tooltip-content { |
| 105 | 107 | inset-block: 100% auto; |
| @@ -116,9 +118,9 @@ | ||
| 116 | 118 | inset-block-end: 50%; |
| 117 | 119 | margin-inline: 0 -12px; |
| 118 | 120 | margin-block-end: 0; |
| 119 | 121 | border-block-start-color: transparent; |
| 120 | - border-inline-start-color: $bg-color; | |
| 122 | + border-inline-start-color: var(--cs-tooltip-background-color); | |
| 121 | 123 | } |
| 122 | 124 | |
| 123 | 125 | &::before, .tooltip-content { |
| 124 | 126 | inset-inline: auto 100%; |
| @@ -129,9 +131,9 @@ | ||
| 129 | 131 | &::before { |
| 130 | 132 | margin-block-end: 0; |
| 131 | 133 | margin-inline-start: -12px; |
| 132 | 134 | border-block-start-color: transparent; |
| 133 | - border-inline-end-color: $bg-color; | |
| 135 | + border-inline-end-color: var(--cs-tooltip-background-color); | |
| 134 | 136 | } |
| 135 | 137 | |
| 136 | 138 | &::before, .tooltip-content { |
| 137 | 139 | inset-inline-start: 100%; |
