/* USE-CASES — static component styles.
 * Search the sg- class in HTML to find the element. Reused classes share a rule.
 * The :is() scope preserves former inline priority over template selectors.
 * No element with id smart-static-priority is required. Keep this scope.
 * JavaScript can override normal properties inline during interactions.
 */

:is(#smart-static-priority,:root) .sg-use-cases-layout-01 {
  overflow-x: clip;
  display: flex;
  position: relative;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-y;
}

:is(#smart-static-priority,:root) .sg-use-cases-layout-02 {
  display: flex;
  position: relative;
  list-style-type: none;
  padding: 0;
  margin: 0;
  justify-content: flex-start;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  width: 100%;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  transform: translateX(-10px);
}

:is(#smart-static-priority,:root) .sg-use-cases-layout-03 {
  height: 100%;
  width: 100%;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
}

:is(#smart-static-priority,:root) .sg-use-cases-border-01 {
  --border-bottom-width:  1px;
  --border-color:  var(
                                  --token-0a34df0a-701b-4bf9-bdf5-c1a9964dab0b,
                                  rgba(255, 255, 255, 0.3)
                                );
  --border-left-width:  1px;
  --border-right-width:  1px;
  --border-style:  solid;
  --border-top-width:  1px;
  backdrop-filter: blur(20px);
  background-color: var(--token-0a34df0a-701b-4bf9-bdf5-c1a9964dab0b,
                                  rgba(255, 255, 255, 0.3)
                                );
  -webkit-backdrop-filter: blur(20px);
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

:is(#smart-static-priority,:root) .sg-use-cases-layout-04 {
  --extracted-a0htzi:  var(
                                      --token-0edc2e6a-5fd1-47c5-a905-c3de9f07cea3,
                                      rgb(29, 29, 29)
                                    );
  --fx-link-text-color:  rgb(0, 153, 255);
  --fx-link-text-decoration:  underline;
  transform: none;
}

:is(#smart-static-priority,:root) .sg-use-cases-text-01 {
  --fx-text-color:  var(
                                        --extracted-a0htzi,
                                        var(
                                          --token-0edc2e6a-5fd1-47c5-a905-c3de9f07cea3,
                                          rgb(29, 29, 29)
                                        )
                                      );
}

:is(#smart-static-priority,:root) .sg-use-cases-layout-05 {
  width: 100%;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

:is(#smart-static-priority,:root) .sg-use-cases-border-02 {
  --border-bottom-width:  1px;
  --border-color:  var(
                              --token-0a34df0a-701b-4bf9-bdf5-c1a9964dab0b,
                              rgba(255, 255, 255, 0.3)
                            );
  --border-left-width:  1px;
  --border-right-width:  1px;
  --border-style:  solid;
  --border-top-width:  1px;
  backdrop-filter: blur(20px);
  background-color: var(--token-0a34df0a-701b-4bf9-bdf5-c1a9964dab0b,
                              rgba(255, 255, 255, 0.3)
                            );
  -webkit-backdrop-filter: blur(20px);
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

:is(#smart-static-priority,:root) .sg-use-cases-layout-06 {
  --extracted-1eung3n:  var(
                                  --token-0edc2e6a-5fd1-47c5-a905-c3de9f07cea3,
                                  rgb(29, 29, 29)
                                );
  --fx-link-text-color:  rgb(0, 153, 255);
  --fx-link-text-decoration:  underline;
  transform: none;
}

:is(#smart-static-priority,:root) .sg-use-cases-text-02 {
  --fx-text-color:  var(
                                    --extracted-1eung3n,
                                    var(
                                      --token-0edc2e6a-5fd1-47c5-a905-c3de9f07cea3,
                                      rgb(29, 29, 29)
                                    )
                                  );
}

:is(#smart-static-priority,:root) .sg-use-cases-surface-01 {
  background-color: var(--token-8a16c1e0-9178-435f-8361-d83efd74d213,
                            rgb(237, 241, 244)
                          );
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
}

:is(#smart-static-priority,:root) .sg-use-cases-layout-07 {
  --extracted-r6o4lv:  var(--variable-reference-rhGiDGRBu-J6sr42DwA);
  --fx-link-text-color:  rgb(0, 153, 255);
  --fx-link-text-decoration:  underline;
  --variable-reference-rhGiDGRBu-J6sr42DwA:  var(
                              --token-b923e1cb-cf6e-406c-a3d3-6c79738c4b54,
                              rgb(77, 88, 95)
                            );
  transform: none;
}

:is(#smart-static-priority,:root) .sg-use-cases-text-03 {
  --fx-text-alignment:  center;
  --fx-text-color:  var(
                                --extracted-r6o4lv,
                                var(--token-0edc2e6a-5fd1-47c5-a905-c3de9f07cea3, rgb(29, 29, 29))
                              );
}