Chore: Migrate gf-form classes to emotion globals (#91632)

* migrate gf-form classes to emotion globals

* should be sm due to the different way the breakpoints work

.betterer.results

@@ -7574,6 +7574,34 @@ exports[`no gf-form usage`] = {
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
     ],
+    "packages/grafana-ui/src/themes/GlobalStyles/forms.ts:5381": [
+      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
+      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
+      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
+      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
+      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
+      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
+      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
+      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
+      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
+      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
+      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
+      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
+      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
+      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
+      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
+      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
+      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
+      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
+      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
+      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
+      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
+      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
+      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
+      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
+      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
+      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
+    ],
     "packages/grafana-ui/src/themes/GlobalStyles/legacySelect.ts:5381": [
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],

packages/grafana-ui/src/themes/GlobalStyles/forms.ts

@@ -27,5 +27,345 @@ export function getFormElementStyles(theme: GrafanaTheme2) {
       {
         width: 'auto', // Override of generic input selector
       },
+    '.gf-form': {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      textAlign: 'left',
+      position: 'relative',
+      marginBottom: theme.spacing(0.5),
+
+      '&--offset-1': {
+        marginLeft: theme.spacing(2),
+      },
+
+      '&--grow': {
+        flexGrow: 1,
+      },
+
+      '&--flex-end': {
+        justifyContent: 'flex-end',
+      },
+
+      '&--align-center': {
+        alignContent: 'center',
+      },
+
+      '&--alt': {
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+
+        '.gf-form-label': {
+          padding: '4px 0',
+        },
+      },
+    },
+    '.gf-form--has-input-icon': {
+      position: 'relative',
+      marginRight: theme.spacing(0.5),
+
+      '.gf-form-input-icon': {
+        position: 'absolute',
+        top: '8px',
+        fontSize: theme.typography.size.lg,
+        left: '10px',
+        color: theme.colors.text.disabled,
+      },
+
+      '> input': {
+        paddingLeft: '35px',
+
+        '&:focus + .gf-form-input-icon': {
+          color: theme.colors.text.secondary,
+        },
+      },
+
+      '.Select--multi .Select-multi-value-wrapper, .Select-placeholder': {
+        paddingLeft: '30px',
+      },
+    },
+
+    '.gf-form-disabled': {
+      color: theme.colors.text.secondary,
+
+      '.gf-form-select-wrapper::after': {
+        color: theme.colors.text.secondary,
+      },
+
+      'a, .gf-form-input': {
+        color: theme.colors.text.secondary,
+      },
+    },
+
+    '.gf-form-group': {
+      marginBottom: theme.spacing(5),
+    },
+    '.gf-form-inline': {
+      display: 'flex',
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      alignContent: 'flex-start',
+
+      '&--nowrap': {
+        flexWrap: 'nowrap',
+      },
+
+      '&--xs-view-flex-column': {
+        flexDirection: 'row',
+        flexWrap: 'nowrap',
+        [theme.breakpoints.down('sm')]: {
+          flexDirection: 'column',
+        },
+      },
+
+      '.select-container': {
+        marginRight: theme.spacing(0.5),
+      },
+
+      '.gf-form-spacing': {
+        marginRight: theme.spacing(0.5),
+      },
+    },
+
+    '.gf-form-button-row': {
+      paddingTop: theme.spacing(3),
+      'a, button': {
+        marginRight: theme.spacing(2),
+      },
+    },
+    '.gf-form-label': {
+      display: 'flex',
+      alignItems: 'center',
+      padding: theme.spacing(0, 1),
+      flexShrink: 0,
+      fontWeight: theme.typography.fontWeightMedium,
+      fontSize: theme.typography.size.sm,
+      backgroundColor: theme.colors.background.secondary,
+      height: '32px',
+      lineHeight: '32px',
+      marginRight: theme.spacing(0.5),
+      borderRadius: theme.shape.radius.default,
+      justifyContent: 'space-between',
+      border: 'none',
+
+      '&--grow': {
+        flexGrow: 1,
+      },
+
+      '&--transparent': {
+        backgroundColor: 'transparent',
+        border: 0,
+        textAlign: 'right',
+        paddingLeft: 0,
+      },
+
+      '&--variable': {
+        color: theme.colors.primary.text,
+        background: theme.components.panel.background,
+        border: `1px solid ${theme.components.panel.borderColor}`,
+      },
+
+      '&--btn': {
+        border: 'none',
+        borderRadius: theme.shape.radius.default,
+        '&:hover': {
+          background: theme.colors.background.secondary,
+          color: theme.colors.text.primary,
+        },
+      },
+
+      '&:disabled': {
+        color: theme.colors.text.secondary,
+      },
+    },
+    '.gf-form-label + .gf-form-label': {
+      marginRight: theme.spacing(0.5),
+    },
+    '.gf-form-pre': {
+      display: 'block !important',
+      flexGrow: 1,
+      margin: 0,
+      marginRight: theme.spacing(0.5),
+      border: `1px solid transparent`,
+      borderLeft: 'none',
+      borderRadius: theme.shape.radius.default,
+    },
+    '.gf-form-textarea': {
+      maxWidth: '650px',
+    },
+    '.gf-form-input': {
+      display: 'block',
+      width: '100%',
+      height: '32px',
+      padding: theme.spacing(0, 1),
+      fontSize: theme.typography.size.md,
+      lineHeight: '18px',
+      color: theme.components.input.text,
+      backgroundColor: theme.components.input.background,
+      backgroundImage: 'none',
+      backgroundClip: 'padding-box',
+      border: `1px solid ${theme.components.input.borderColor}`,
+      borderRadius: theme.shape.radius.default,
+      marginRight: theme.spacing(0.5),
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+
+      // text areas should be scrollable
+      '&textarea': {
+        overflow: 'auto',
+        whiteSpace: 'pre-wrap',
+        padding: `6px ${theme.spacing(1)}`,
+        minHeight: '32px',
+        height: 'auto',
+      },
+
+      // Unstyle the caret on `<select>`s in IE10+.
+      '&::-ms-expand': {
+        backgroundColor: 'transparent',
+        border: 0,
+        display: 'none',
+      },
+
+      // Customize the `:focus` state to imitate native WebKit styles.
+      '&:focus': {
+        borderColor: theme.colors.primary.border,
+        outline: 'none',
+      },
+
+      // Placeholder
+      '&::placeholder': {
+        color: theme.colors.text.disabled,
+        opacity: 1,
+      },
+
+      '&:disabled, &[readonly]': {
+        backgroundColor: theme.colors.action.disabledBackground,
+        // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
+        opacity: 1,
+      },
+
+      '&:disabled': {
+        cursor: 'not-allowed',
+      },
+
+      '&.gf-size-auto': {
+        width: 'auto',
+      },
+
+      '&--dropdown': {
+        paddingRight: theme.spacing(3),
+        position: 'relative',
+        display: 'flex',
+        alignItems: 'center',
+
+        '&::after': {
+          position: 'absolute',
+          top: '36%',
+          right: '11px',
+          fontSize: '11px',
+          backgroundColor: 'transparent',
+          color: theme.colors.text.primary,
+          font: `normal normal normal ${theme.typography.size.sm}/1 FontAwesome`,
+          content: '"\f0d7"',
+          pointerEvents: 'none',
+        },
+      },
+
+      '&--has-help-icon': {
+        paddingRight: theme.spacing(4),
+      },
+    },
+    '.gf-form-select-wrapper': {
+      position: 'relative',
+      backgroundColor: theme.components.input.background,
+      marginRight: theme.spacing(0.5),
+
+      '.gf-form-select-icon': {
+        position: 'absolute',
+        zIndex: 1,
+        top: '50%',
+        marginTop: '-7px',
+
+        '+ .gf-form-input': {
+          position: 'relative',
+          zIndex: 2,
+          paddingLeft: theme.spacing(4),
+          backgroundColor: 'transparent',
+
+          option: {
+            // Firefox
+            color: theme.v1.palette.black,
+          },
+        },
+      },
+
+      '.gf-form-input': {
+        marginRight: 0,
+        lineHeight: '32px',
+      },
+
+      'select.gf-form-input': {
+        textIndent: '0.01px',
+        textOverflow: "''",
+        paddingRight: theme.spacing(4),
+        appearance: 'none',
+
+        '&:-moz-focusring': {
+          outline: 'none',
+          color: 'transparent',
+          textShadow: `0 0 0 ${theme.colors.text.primary}`,
+        },
+
+        '&.ng-empty': {
+          color: theme.colors.text.secondary,
+        },
+      },
+
+      '&::after': {
+        position: 'absolute',
+        top: '36%',
+        right: '11px',
+        backgroundColor: 'transparent',
+        color: theme.colors.text.primary,
+        font: `normal normal normal ${theme.typography.size.sm}/1 FontAwesome`,
+        content: '"\f0d7"',
+        pointerEvents: 'none',
+        fontSize: '11px',
+      },
+
+      '&--has-help-icon': {
+        '&::after': {
+          right: theme.spacing(4),
+        },
+      },
+    },
+    '.gf-form--v-stretch': {
+      alignItems: 'stretch',
+    },
+
+    '.gf-form-btn': {
+      padding: theme.spacing(0, 1),
+      marginRight: theme.spacing(0.5),
+      lineHeight: '18px',
+      fontSize: theme.typography.size.sm,
+      flexShrink: 0,
+      flexGrow: 0,
+    },
+    '.gf-form-help-icon': {
+      flexGrow: 0,
+      color: theme.colors.text.secondary,
+
+      '&:hover': {
+        color: theme.colors.text.primary,
+      },
+    },
+    '.cta-form': {
+      position: 'relative',
+      padding: theme.spacing(3),
+      backgroundColor: theme.colors.background.secondary,
+      marginBottom: theme.spacing(3),
+      borderTop: `3px solid ${theme.colors.success.main}`,
+    },
   });
 }

public/sass/_angular.scss

@@ -3,6 +3,7 @@
 
 @use 'sass:map';
 @use 'sass:color';
+@use 'sass:list';
 
 // Gradients
 @mixin gradient-vertical($startColor: #555, $endColor: #333) {
@@ -2250,3 +2251,51 @@ div.flot-text {
     }
   }
 }
+
+.gf-form-dropdown-typeahead {
+  position: relative;
+
+  &::after {
+    position: absolute;
+    top: 35%;
+    right: $space-sm;
+    background-color: transparent;
+    color: $input-color;
+    font: normal normal normal list.slash($font-size-sm, 1) FontAwesome;
+    content: '\f0d7';
+    pointer-events: none;
+    font-size: 11px;
+  }
+}
+
+.gf-form-help-icon {
+  flex-grow: 0;
+  color: $text-color-weak;
+
+  &--bold {
+    color: $text-color-emphasis;
+    padding-left: 0;
+  }
+
+  &--right-absolute {
+    position: absolute;
+    right: $spacer;
+    top: 6px;
+  }
+
+  &--right-normal {
+    float: right;
+  }
+
+  &--header {
+    margin-bottom: $space-xxs;
+  }
+
+  &--small-padding {
+    padding-left: 4px;
+  }
+
+  &:hover {
+    color: $text-color;
+  }
+}

public/sass/_grafana.scss

@@ -13,7 +13,6 @@
 
 // COMPONENTS
 @import 'components/buttons';
-@import 'components/gf-form';
 @import 'components/dropdown';
 @import 'components/dashboard_grid';
 

public/sass/components/_gf-form.scss

@@ -1,484 +0,0 @@
-@use 'sass:list';
-$input-border: 1px solid $input-border-color;
-
-@mixin form-control-focus() {
-  &:focus {
-    border-color: $input-border-focus;
-    outline: none;
-  }
-}
-
-.gf-form {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  text-align: left;
-  position: relative;
-  margin-bottom: $space-xs;
-
-  &--offset-1 {
-    margin-left: $spacer;
-  }
-
-  &--grow {
-    flex-grow: 1;
-  }
-
-  &--flex-end {
-    justify-content: flex-end;
-  }
-
-  &--align-center {
-    align-content: center;
-  }
-
-  &--alt {
-    flex-direction: column;
-    align-items: flex-start;
-
-    .gf-form-label {
-      padding: 4px 0;
-    }
-  }
-}
-
-.gf-form--has-input-icon {
-  position: relative;
-  margin-right: $space-xs;
-
-  .gf-form-input-icon {
-    position: absolute;
-    top: 8px;
-    font-size: $font-size-lg;
-    left: 10px;
-    color: $input-color-placeholder;
-  }
-
-  > input {
-    padding-left: 35px;
-
-    &:focus + .gf-form-input-icon {
-      color: $text-muted;
-    }
-  }
-
-  .Select--multi .Select-multi-value-wrapper,
-  .Select-placeholder {
-    padding-left: 30px;
-  }
-}
-
-.gf-form-disabled {
-  color: $text-color-weak;
-
-  .gf-form-select-wrapper::after {
-    color: $text-color-weak;
-  }
-
-  a,
-  .gf-form-input {
-    color: $text-color-weak;
-  }
-}
-
-.gf-form-group {
-  margin-bottom: $spacer * 2.5;
-}
-
-.gf-form-inline {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-content: flex-start;
-
-  &--nowrap {
-    flex-wrap: nowrap;
-  }
-
-  &--xs-view-flex-column {
-    flex-direction: row;
-    flex-wrap: nowrap;
-    @include media-breakpoint-down(xs) {
-      flex-direction: column;
-    }
-  }
-
-  .select-container {
-    margin-right: $space-xs;
-  }
-
-  .gf-form-spacing {
-    margin-right: $space-xs;
-  }
-}
-
-.gf-form-button-row {
-  padding-top: $spacer * 1.5;
-  a,
-  button {
-    margin-right: $spacer;
-  }
-}
-
-.gf-form-label {
-  display: flex;
-  align-items: center;
-  padding: $input-padding;
-  flex-shrink: 0;
-  font-weight: $font-weight-semi-bold;
-  font-size: $font-size-sm;
-  background-color: $input-label-bg;
-  height: $input-height;
-  line-height: $input-height;
-  margin-right: $space-xs;
-  border-radius: $input-border-radius;
-  justify-content: space-between;
-  border: none;
-
-  &--grow {
-    flex-grow: 1;
-  }
-
-  &--error {
-    color: $critical;
-  }
-
-  &--transparent {
-    background-color: transparent;
-    border: 0;
-    text-align: right;
-    padding-left: 0px;
-  }
-
-  &--variable {
-    color: $variable;
-    background: $panel-bg;
-    border: $panel-border;
-  }
-
-  &--dashlink {
-    background: $panel-bg;
-    border: $panel-border;
-  }
-
-  &--justify-left {
-    justify-content: left;
-  }
-
-  &--btn {
-    border: none;
-    border-radius: $border-radius;
-
-    &:hover {
-      background: $list-item-hover-bg;
-      color: $link-color;
-    }
-  }
-
-  &:disabled {
-    color: $text-color-weak;
-  }
-}
-
-.gf-form-label + .gf-form-label {
-  margin-right: $space-xs;
-}
-
-.gf-form-pre {
-  display: block !important;
-  flex-grow: 1;
-  margin: 0;
-  margin-right: $space-xs;
-  border: $border-width solid transparent;
-  border-left: none;
-  border-radius: $input-border-radius;
-}
-
-.gf-form-textarea {
-  max-width: 650px;
-}
-
-.gf-form-input {
-  display: block;
-  width: 100%;
-  height: $input-height;
-  padding: $input-padding;
-  font-size: $font-size-md;
-  line-height: $input-line-height;
-  color: $input-color;
-  background-color: $input-bg;
-  background-image: none;
-  background-clip: padding-box;
-  border: $input-border;
-  border-radius: $input-border-radius;
-  margin-right: $space-xs;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-
-  // text areas should be scrollable
-  @at-root textarea#{&} {
-    overflow: auto;
-    white-space: pre-wrap;
-    padding: 6px $space-sm;
-    min-height: $input-height;
-    height: auto;
-  }
-
-  // Unstyle the caret on `<select>`s in IE10+.
-  &::-ms-expand {
-    background-color: transparent;
-    border: 0;
-    display: none;
-  }
-
-  // Customize the `:focus` state to imitate native WebKit styles.
-  @include form-control-focus();
-
-  // Placeholder
-  &::placeholder {
-    color: $input-color-placeholder;
-    opacity: 1;
-  }
-
-  &:disabled,
-  &[readonly] {
-    background-color: $input-bg-disabled;
-    // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
-    opacity: 1;
-  }
-
-  &:disabled {
-    cursor: $cursor-disabled;
-  }
-
-  &.gf-size-auto {
-    width: auto;
-  }
-
-  &--dropdown {
-    padding-right: $space-lg;
-    position: relative;
-    display: flex;
-    align-items: center;
-
-    &::after {
-      position: absolute;
-      top: 36%;
-      right: 11px;
-      font-size: 11px;
-      background-color: transparent;
-      color: $text-color;
-      font: normal normal normal list.slash($font-size-sm, 1) FontAwesome;
-      content: '\f0d7';
-      pointer-events: none;
-    }
-  }
-
-  &--small {
-    padding-top: 4px;
-    padding-bottom: 4px;
-    font-size: $font-size-sm;
-  }
-
-  &--plaintext {
-    white-space: unset;
-  }
-
-  &--has-help-icon {
-    padding-right: $space-xl;
-  }
-}
-
-.gf-form-hint {
-  width: 100%;
-}
-
-.gf-form-hint-text {
-  display: block;
-  text-align: right;
-  padding-top: 0.5em;
-}
-
-.gf-form-select-wrapper {
-  position: relative;
-  background-color: $input-bg;
-  margin-right: $space-xs;
-
-  .gf-form-select-icon {
-    position: absolute;
-    z-index: 1;
-    left: $input-padding;
-    top: 50%;
-    margin-top: -7px;
-
-    + .gf-form-input {
-      position: relative;
-      z-index: 2;
-      padding-left: $space-xl;
-      background-color: transparent;
-
-      option {
-        // Firefox
-        color: $black;
-      }
-    }
-  }
-
-  .gf-form-input {
-    margin-right: 0;
-    line-height: $input-height;
-  }
-
-  select.gf-form-input {
-    text-indent: 0.01px;
-    text-overflow: '';
-    padding-right: $space-xl;
-    appearance: none;
-
-    &:-moz-focusring {
-      outline: none;
-      color: transparent;
-      text-shadow: 0 0 0 $text-color;
-    }
-
-    &.ng-empty {
-      color: $text-color-weak;
-    }
-  }
-
-  &::after {
-    position: absolute;
-    top: 36%;
-    right: 11px;
-    background-color: transparent;
-    color: $text-color;
-    font: normal normal normal list.slash($font-size-sm, 1) FontAwesome;
-    content: '\f0d7';
-    pointer-events: none;
-    font-size: 11px;
-  }
-
-  &--has-help-icon {
-    &::after {
-      right: $space-xl;
-    }
-  }
-}
-
-.gf-form--v-stretch {
-  align-items: stretch;
-}
-
-.gf-form-btn {
-  padding: $input-padding;
-  margin-right: $space-xs;
-  line-height: $input-line-height;
-  font-size: $font-size-sm;
-
-  flex-shrink: 0;
-  flex-grow: 0;
-}
-
-.natural-language-input {
-  &input[type='number'] {
-    font-size: $font-size-base;
-    line-height: $input-line-height;
-    margin: -6px -5px 0 5px;
-    padding: $space-xs;
-  }
-}
-
-.gf-form-dropdown-typeahead {
-  //margin-right: $space-xs; ?
-  position: relative;
-
-  &::after {
-    position: absolute;
-    top: 35%;
-    right: $space-sm;
-    background-color: transparent;
-    color: $input-color;
-    font: normal normal normal list.slash($font-size-sm, 1) FontAwesome;
-    content: '\f0d7';
-    pointer-events: none;
-    font-size: 11px;
-  }
-}
-
-.gf-form-help-icon {
-  flex-grow: 0;
-  color: $text-color-weak;
-
-  &--bold {
-    color: $text-color-emphasis;
-    padding-left: 0;
-  }
-
-  &--right-absolute {
-    position: absolute;
-    right: $spacer;
-    top: 6px;
-  }
-
-  &--right-normal {
-    float: right;
-  }
-
-  &--header {
-    margin-bottom: $space-xxs;
-  }
-
-  &--small-padding {
-    padding-left: 4px;
-  }
-
-  &:hover {
-    color: $text-color;
-  }
-}
-
-select.gf-form-input ~ .gf-form-help-icon {
-  right: 10px;
-}
-
-.gf-form-icon--right-absolute {
-  position: absolute;
-  right: $spacer;
-  top: 10px;
-  color: $text-muted;
-}
-
-.cta-form {
-  position: relative;
-  padding: $space-lg;
-  background-color: $empty-list-cta-bg;
-  margin-bottom: $space-lg;
-  border-top: 3px solid $green-base;
-}
-
-.cta-form__close {
-  background: transparent;
-  padding: 4px 8px 4px 9px;
-  border: none;
-  position: absolute;
-  right: 0;
-  top: -2px;
-  font-size: $font-size-md;
-
-  &:hover {
-    color: $text-color-strong;
-  }
-}
-
-.cta-form__bar {
-  display: flex;
-  align-items: center;
-  align-content: center;
-  margin-bottom: 20px;
-}
-
-.cta-form__bar-header {
-  font-size: $font-size-h4;
-  padding-right: 20px;
-}