@design-factory/design-factory 20.0.1 → 21.0.0-next.0

package/styles/scss/components/inputs/_inputs.scss

@@ -1,292 +0,0 @@
-@use 'sass:map';
-@use 'sass:string';
-@use 'sass:meta';
-
-@import 'inputs.mixin';
-
-%input-group-common {
-  @include transition($input-transition); // default bootstrap input has this property
-  background-color: var(--#{$prefix}iwi-input-group-bg-color);
-  &.df-disabled {
-    &,
-    .input-group-text {
-      background-color: var(--#{$prefix}iwi-input-group-disabled-bg-color);
-      cursor: var(--#{$prefix}disabled-cursor);
-      color: var(--#{$prefix}iwi-input-group-disabled-text-color);
-    }
-  }
-  align-items: center;
-  border-top: var(--#{$prefix}iwi-input-border-width) solid $input-border-color;
-  border-bottom: var(--#{$prefix}iwi-input-border-width) solid $input-border-color;
-  min-width: $input-border-radius;
-
-  // This class is to be able to remove the icon in an input with icon and to come back to a normal input look
-  // even if the html of the input group is staying.
-  &.df-is-empty {
-    padding-left: var(--#{$prefix}iwi-emptyspace-padding);
-    padding-right: var(--#{$prefix}iwi-emptyspace-padding);
-    .input-group-text {
-      display: none;
-    }
-  }
-
-  button.input-group-text {
-    &:not(:disabled):not(.disabled) {
-      color: var(--#{$prefix}iwi-icon-font-color);
-      &:hover {
-        &:before {
-          background-color: var(--#{$prefix}iwi-icon-hover-bg-color);
-          cursor: var(--#{$prefix}cursor-type);
-        }
-      }
-    }
-    &:disabled,
-    &.disabled {
-      cursor: var(--#{$prefix}disabled-cursor);
-      background-color: var(--#{$prefix}iwi-input-group-disabled-bg-color);
-    }
-  }
-
-  .input-group-text {
-    height: 100%;
-    width: 100%;
-    border: none;
-    padding: 0;
-    background-color: var(--#{$prefix}iwi-input-group-text-bg-color);
-    &:before {
-      font-size: var(--#{$prefix}iwi-icon-font-size);
-      height: var(--#{$prefix}iwi-icon-height);
-      width: var(--#{$prefix}iwi-icon-width);
-      border-radius: var(--#{$prefix}iwi-icon-border-radius);
-      line-height: var(--#{$prefix}iwi-icon-line-height);
-    }
-    &:focus-visible {
-      outline: none; // override mandatory
-      &:before {
-        box-shadow: var(--#{$prefix}iwi-focused-box-shadow);
-      }
-    }
-  }
-}
-
-input[type='search']::-webkit-search-cancel-button,
-input[type='search']::-webkit-search-decoration {
-  display: none;
-}
-
-.input-group {
-  --#{$prefix}iwi-group-append-margin-left: #{$df-iwi-group-append-margin-left};
-  --#{$prefix}iwi-group-prepend-margin-end: #{$df-iwi-group-prepend-margin-end};
-  --#{$prefix}iwi-focused-box-shadow: #{$df-iwi-focused-box-shadow};
-  --#{$prefix}iwi-append-text-padding-right: #{$df-iwi-append-text-padding-right};
-  --#{$prefix}iwi-append-text-padding-left: #{$df-iwi-append-text-padding-left};
-  --#{$prefix}iwi-prepend-text-padding-right: #{$df-iwi-prepend-text-padding-right};
-  --#{$prefix}iwi-prepend-text-padding-left: #{$df-iwi-prepend-text-padding-left};
-  --#{$prefix}iwi-input-group-bg-color: #{$df-iwi-input-group-bg-color};
-  --#{$prefix}iwi-input-group-text-bg-color: #{$df-iwi-input-group-text-bg-color};
-  --#{$prefix}iwi-input-group-disabled-bg-color: #{$df-iwi-input-group-disabled-bg-color};
-  --#{$prefix}iwi-input-group-disabled-text-color: #{$df-iwi-input-group-disabled-text-color};
-  --#{$prefix}iwi-emptyspace-padding: #{$df-iwi-emptyspace-padding};
-  --#{$prefix}iwi-border-between-color: #{$df-iwi-border-between-color};
-  --#{$prefix}iwi-focused-border-between-color: #{$df-iwi-focused-border-between-color};
-  --#{$prefix}iwi-icon-hover-bg-color: #{$df-iwi-icon-hover-bg-color};
-  --#{$prefix}iwi-icon-font-size: #{$df-iwi-icon-font-size};
-  --#{$prefix}iwi-icon-border-radius: #{$df-iwi-icon-border-radius};
-  --#{$prefix}iwi-icon-line-height: #{$df-iwi-icon-line-height};
-  --#{$prefix}iwi-focused-border-color: #{$df-iwi-focused-border-color};
-  --#{$prefix}iwi-icon-font-color: #{$df-iwi-icon-font-color};
-  --#{$prefix}iwi-dpr-from-border-right: #{$df-iwi-dpr-from-border-right};
-  --#{$prefix}iwi-dpr-from-border-radius-top-right: #{$df-iwi-dpr-from-border-radius-top-right};
-  --#{$prefix}iwi-dpr-from-border-radius-bottom-right: #{$df-iwi-dpr-from-border-radius-bottom-right};
-  --#{$prefix}iwi-dpr-to-border-left: #{$df-iwi-dpr-to-border-left};
-  --#{$prefix}iwi-dpr-to-border-radius-top-left: #{$df-iwi-dpr-to-border-radius-top-left};
-  --#{$prefix}iwi-dpr-to-border-radius-bottom-left: #{$df-iwi-dpr-to-border-radius-bottom-left};
-  --#{$prefix}iwi-dpr-focus-border: #{$df-iwi-dpr-focus-border};
-  --#{$prefix}iwi-input-border-width: #{$input-border-width};
-  @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-    --#{$prefix}box-shadow-color: #{$input-focus-border-color};
-  }
-
-  $validation-messages: '';
-  @each $state in map.keys($form-validation-states) {
-    $validation-messages: $validation-messages +
-      ':not(.' +
-      string.unquote($state) +
-      '-tooltip)' +
-      ':not(.' +
-      string.unquote($state) +
-      '-feedback)';
-  }
-
-  // RTL support
-  @include rtl {
-    > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
-      // todo maybe add margin-left: 0;
-      // also see the RTL
-      margin-right: calc(-1 * var(--#{$prefix}iwi-input-border-width));
-    }
-  }
-
-  // TODO - Remove it when ngbootstrap dropdown will be compliant with Bootstrap
-  &:not(.has-validation) {
-    > .dropdown:not(:last-child) {
-      > .dropdown-toggle {
-        @include border-end-radius(0);
-      }
-    }
-  }
-  > .dropdown:not(:first-child) {
-    > .dropdown-toggle {
-      @include border-start-radius(0);
-    }
-  }
-
-  > .form-control + .form-control {
-    @include ltr {
-      margin-left: var(--#{$prefix}iwi-group-prepend-margin-end);
-    }
-    @include rtl {
-      margin-right: var(--#{$prefix}iwi-group-prepend-margin-end);
-    }
-  }
-}
-
-.input-group.df-input-append {
-  input.df-input-withicon.append {
-    @include df-input-withicon-append();
-  }
-
-  @each $state, $data in $form-validation-states {
-    @include df-input-with-icon-validation-state($state, map.get($data, color), 'append');
-  }
-
-  .input-group-append {
-    @extend %input-group-common;
-    @include ltr {
-      margin-left: var(--#{$prefix}iwi-group-append-margin-left);
-      border-right: var(--#{$prefix}iwi-input-border-width) solid $input-border-color;
-      border-radius: $input-border-radius;
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-      @include df-iwi-root-left('.df-input-datepicker-range') {
-        border-top-right-radius: var(--#{$prefix}iwi-dpr-from-border-radius-top-right);
-        border-bottom-right-radius: var(--#{$prefix}iwi-dpr-from-border-radius-bottom-right);
-        border-right: var(--#{$prefix}iwi-dpr-from-border-right);
-      }
-      @include df-iwi-root-right('.df-input-datepicker-range.df-focused') {
-        border-right: var(--#{$prefix}iwi-dpr-focus-border) !important;
-      }
-    }
-    @include rtl {
-      margin-right: var(--#{$prefix}iwi-group-append-margin-left);
-      border-left: var(--#{$prefix}iwi-input-border-width) solid $input-border-color;
-      border-radius: $input-border-radius 0 0 $input-border-radius;
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-      @include df-iwi-root-left('.df-input-datepicker-range') {
-        border-top-left-radius: var(--#{$prefix}iwi-dpr-from-border-radius-top-right);
-        border-bottom-left-radius: var(--#{$prefix}iwi-dpr-from-border-radius-bottom-right);
-        border-left: var(--#{$prefix}iwi-dpr-from-border-right);
-      }
-      @include df-iwi-root-right('.df-input-datepicker-range.df-focused') {
-        border-left: var(--#{$prefix}iwi-dpr-focus-border) !important;
-      }
-    }
-    @include df-iwi-root-right('.df-input-datepicker-range.df-focused') {
-      border-top: var(--#{$prefix}iwi-dpr-focus-border) !important;
-      border-bottom: var(--#{$prefix}iwi-dpr-focus-border) !important;
-    }
-    @include df-iwi-root-left('.df-input-datepicker-range.df-focused') {
-      border-top: var(--#{$prefix}iwi-dpr-focus-border) !important;
-      border-bottom: var(--#{$prefix}iwi-dpr-focus-border) !important;
-    }
-    padding-left: var(--#{$prefix}iwi-append-text-padding-left);
-    padding-right: var(--#{$prefix}iwi-append-text-padding-right);
-    border-radius: $input-border-radius;
-  }
-
-  &.df-focused .input-group-append {
-    @include ltr {
-      border-color: var(--#{$prefix}iwi-focused-border-color);
-      border-left-color: var(--#{$prefix}iwi-focused-border-between-color);
-    }
-    @include rtl {
-      border-color: var(--#{$prefix}iwi-focused-border-color);
-      border-right-color: var(--#{$prefix}iwi-focused-border-between-color);
-    }
-  }
-}
-
-.input-group.df-input-prepend {
-  input.df-input-withicon.prepend {
-    @include df-input-withicon-prepend();
-  }
-
-  @each $state, $data in $form-validation-states {
-    @include df-input-with-icon-validation-state($state, map.get($data, color), 'prepend');
-  }
-
-  .input-group-prepend {
-    @extend %input-group-common;
-    @include ltr {
-      border-left: var(--#{$prefix}iwi-input-border-width) solid $input-border-color;
-      margin-right: var(--#{$prefix}iwi-group-prepend-margin-end);
-      padding-left: var(--#{$prefix}iwi-prepend-text-padding-left);
-      padding-right: var(--#{$prefix}iwi-prepend-text-padding-right);
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-    @include rtl {
-      border-right: var(--#{$prefix}iwi-input-border-width) solid $input-border-color;
-      margin-left: var(--#{$prefix}iwi-group-prepend-margin-end);
-      padding-right: var(--#{$prefix}iwi-prepend-text-padding-left);
-      padding-left: var(--#{$prefix}iwi-prepend-text-padding-right);
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
-    border-radius: $input-border-radius;
-  }
-
-  &.df-focused .input-group-prepend {
-    @include ltr {
-      border-color: var(--#{$prefix}iwi-focused-border-color);
-      border-right-color: var(--#{$prefix}iwi-focused-border-between-color);
-    }
-    @include rtl {
-      border-color: var(--#{$prefix}iwi-focused-border-color);
-      border-left-color: var(--#{$prefix}iwi-focused-border-between-color);
-    }
-  }
-
-  &:has(input.df-input-withicon.prepend:focus-visible) {
-    @extend .df-focused;
-  }
-}
-
-.input-group:has(input.df-input-withicon) {
-  &:has(.input-group-append) {
-    @extend .df-input-append;
-  }
-  &:has(.input-group-prepend) {
-    @extend .df-input-prepend;
-  }
-  &:has(input.df-input-withicon:focus-visible) {
-    @extend .df-focused;
-  }
-  .df-input-withicon:has(~ .input-group-append) {
-    @include df-input-withicon-append();
-  }
-  .input-group-prepend ~ .df-input-withicon {
-    @include df-input-withicon-prepend();
-  }
-  .df-input-withicon:disabled ~ .input-group-append {
-    @extend .df-disabled;
-  }
-  .input-group-prepend:has(~ .df-input-withicon:disabled) {
-    @extend .df-disabled;
-  }
-}
-
-.input-group.df-focused {
-  border: none;
-}

package/styles/scss/components/inputs/_inputs.variables.scss

@@ -1,39 +0,0 @@
-// iwi is for input with icon
-// TODO factorize the common variables from this?
-$df-iwi-group-margin-between: -2 * $border-width !default;
-$df-iwi-group-append-margin-left: $df-iwi-group-margin-between !default;
-$df-iwi-group-prepend-margin-end: $df-iwi-group-margin-between !default;
-$df-iwi-focused-box-shadow: $df-focused-box-shadow !default;
-$df-iwi-append-text-padding-right: 0.375rem !default;
-$df-iwi-append-text-padding-left: 0.375rem !default;
-$df-iwi-prepend-text-padding-right: 0.375rem !default;
-$df-iwi-prepend-text-padding-left: 0.375rem !default;
-$df-iwi-input-group-bg-color: $input-bg !default;
-$df-iwi-input-group-text-bg-color: $df-iwi-input-group-bg-color !default;
-$df-iwi-input-group-disabled-bg-color: $df-disabled-bg-color !default;
-$df-iwi-input-group-disabled-text-color: $df-disabled-color !default;
-$df-iwi-emptyspace-padding: 1px !default; // to maintain the border radius visible it can not be 0px
-$df-iwi-border-between-color: transparent !default;
-$df-iwi-focused-border-between-color: $df-iwi-border-between-color !default;
-$df-iwi-icon-hover-bg-color: $df-hover-bg-color !default;
-$df-iwi-icon-font-size: 1rem !default;
-$df-iwi-icon-height: 1.5rem !default;
-$df-iwi-icon-width: 1.5rem !default;
-$df-iwi-icon-border-radius: 50% !default;
-$df-iwi-icon-line-height: 1.5rem !default;
-$df-iwi-focused-border-color: $input-focus-border-color !default;
-$df-iwi-icon-font-color: $df-font-icon-color !default;
-$df-focused-cross-icon: '\f00d' !default; // fa-times from DF icons
-$df-focused-cross-font-size: $df-iwi-icon-font-size !default;
-$df-focused-cross-border-radius: $df-iwi-icon-border-radius !default;
-$df-focused-cross-hover-background-color: $df-iwi-icon-hover-bg-color !default;
-
-$df-iwi-dpr-from-border-right: none !default;
-$df-iwi-dpr-from-border-radius-top-right: 0 !default;
-$df-iwi-dpr-from-border-radius-bottom-right: 0 !default;
-
-$df-iwi-dpr-to-border-left: none !default;
-$df-iwi-dpr-to-border-radius-top-left: 0 !default;
-$df-iwi-dpr-to-border-radius-bottom-left: 0 !default;
-
-$df-iwi-dpr-focus-border: $df-focused-border !default;

package/styles/scss/components/link/_link.mixins.scss

@@ -1,198 +0,0 @@
-@mixin df-link-external-content {
-  content: $df-link-external-icon;
-  font-family: $df-link-external-font-family;
-  position: relative;
-  bottom: var(--#{$prefix}link-external-icon-bottom);
-  @if not meta.variable-exists($name: 'df-enableBranding2023') or not $df-enableBranding2023 {
-    font-size: var(--#{$prefix}link-external-icon-size);
-  }
-}
-
-%df-disabled-link-style {
-  color: var(--#{$prefix}link-disabled-color);
-  background-color: var(--#{$prefix}link-disabled-background);
-  display: var(--#{$prefix}link-disabled-display);
-  cursor: var(--#{$prefix}link-disabled-cursor);
-  text-decoration: var(--#{$prefix}link-disabled-text-decoration);
-  border-bottom-color: var(--#{$prefix}link-disabled-border-bottom-color);
-  border-bottom-width: var(--#{$prefix}link-disabled-border-bottom-width);
-  outline: none;
-  box-shadow: none;
-}
-
-@mixin df-disabled-link {
-  &[aria-disabled='true'] {
-    @extend %df-disabled-link-style;
-
-    &:hover,
-    &:active,
-    &:visited,
-    &:visited:hover {
-      @extend %df-disabled-link-style;
-    }
-  }
-}
-
-//TODO: move the mixin to the links after branding2023 removal and clean the include of this link
-@mixin df-link {
-  color: var(--#{$prefix}link-color);
-  border-bottom: var(--#{$prefix}link-border-bottom);
-
-  &:hover {
-    color: var(--#{$prefix}link-hover-color);
-    background-color: var(--#{$prefix}link-hover-background);
-    border-bottom-width: var(--#{$prefix}link-hover-border-bottom-width);
-    text-decoration: var(--#{$prefix}link-hover-text-decoration);
-  }
-  &:active {
-    color: var(--#{$prefix}link-active-color);
-    border-bottom-width: var(--#{$prefix}link-active-border-bottom-width);
-    border-bottom-color: var(--#{$prefix}link-active-color);
-    background-color: var(--#{$prefix}link-active-background);
-  }
-
-  &:focus-visible {
-    outline: var(--#{$prefix}link-focus-outline);
-    outline-offset: var(--#{$prefix}link-focus-outline-offset);
-    box-shadow: var(--#{$prefix}link-focus-box-shadow);
-  }
-
-  &:visited {
-    color: var(--#{$prefix}link-visited-color);
-    border-bottom-color: var(--#{$prefix}link-visited-color);
-
-    &:hover {
-      color: var(--#{$prefix}link-visited-hover-text-color);
-      background-color: var(--#{$prefix}link-visited-hover-background);
-      border-bottom-width: var(--#{$prefix}link-visited-hover-border-bottom-width);
-      border-bottom-color: var(--#{$prefix}link-visited-hover-border-bottom-color);
-    }
-
-    &:active {
-      color: var(--#{$prefix}link-visited-active-text-color);
-      background-color: var(--#{$prefix}link-visited-active-background);
-      border-bottom-width: var(--#{$prefix}link-visited-active-border-bottom-width);
-      border-bottom-color: var(--#{$prefix}link-visited-active-border-bottom-color);
-    }
-  }
-
-  @include df-disabled-link();
-}
-
-//TODO remove mixin when we find change the web portal to avoid using links as buttons or make a different decision
-@mixin a-btn {
-  &:visited {
-    color: var(--#{$prefix}btn-color);
-    border-color: var(--#{$prefix}btn-border-color);
-
-    &:hover {
-      color: var(--#{$prefix}btn-hover-color);
-      background-color: var(--#{$prefix}btn-hover-bg);
-      border-color: var(--#{$prefix}btn-hover-border-color);
-    }
-
-    &:active {
-      color: var(--#{$prefix}btn-active-color);
-      background-color: var(--#{$prefix}btn-active-bg);
-      border-color: var(--#{$prefix}btn-active-border-color);
-    }
-  }
-  &:hover,
-  &:active {
-    border-width: var(--#{$prefix}btn-border-width);
-  }
-}
-
-//TODO: Remove after branding2023 removal
-@mixin df-link-more-normal {
-  text-transform: var(--#{$prefix}link-more-text-transform);
-  font-weight: var(--#{$prefix}font-weight-semi-bold);
-  white-space: nowrap;
-  background-color: var(--#{$prefix}link-background);
-
-  .df-link-more-text {
-    white-space: nowrap;
-    color: var(--#{$prefix}link-color);
-    text-decoration: none;
-  }
-
-  .df-link-more-icon {
-    position: relative;
-    top: var(--#{$prefix}link-more-icon-top);
-    margin-left: var(--#{$prefix}link-more-icon-margin-left);
-    vertical-align: inherit;
-  }
-}
-
-@mixin df-link-more-hover {
-  color: var(--#{$prefix}link-color);
-  background-color: var(--#{$prefix}link-hover-background);
-  text-decoration: none;
-
-  .df-link-more-text {
-    white-space: nowrap;
-    text-decoration: var(--#{$prefix}link-more-text-decoration-underline);
-  }
-
-  .df-link-more-icon {
-    text-decoration: none;
-  }
-}
-
-@mixin df-link-more-focus {
-  outline: var(--#{$prefix}link-focus-outline);
-  outline-offset: var(--#{$prefix}link-focus-outline-offset);
-  box-shadow: var(--#{$prefix}link-focus-box-shadow);
-  background-color: var(--#{$prefix}link-background);
-
-  .df-link-more-text {
-    white-space: nowrap;
-    text-decoration: var(--#{$prefix}link-more-text-decoration-underline);
-  }
-
-  .df-link-more-icon {
-    text-decoration: none;
-  }
-}
-
-@mixin df-link-more-disabled {
-  display: var(--#{$prefix}link-disabled-display);
-  cursor: var(--#{$prefix}link-disabled-cursor);
-  text-decoration: var(--#{$prefix}link-disabled-text-decoration);
-  outline: none;
-  box-shadow: none;
-  background-color: var(--#{$prefix}link-disabled-background);
-
-  .df-link-more-text {
-    white-space: nowrap;
-    color: var(--#{$prefix}link-disabled-color);
-    text-decoration: var(--#{$prefix}link-disabled-text-decoration);
-  }
-
-  .df-link-more-icon {
-    color: var(--#{$prefix}link-disabled-color);
-    text-decoration: none;
-  }
-}
-
-@mixin df-link-more {
-  &:link {
-    @include df-link-more-normal;
-  }
-
-  &:hover {
-    @include df-link-more-hover;
-  }
-
-  &:focus-visible {
-    @include df-link-more-focus;
-  }
-
-  &[aria-disabled='true'] {
-    &:hover,
-    &:active,
-    &:link {
-      @include df-link-more-disabled;
-    }
-  }
-}

package/styles/scss/components/link/_link.scss

@@ -1,170 +0,0 @@
-@use 'sass:meta';
-@import 'link.mixins';
-
-a {
-  --#{$prefix}link-color: #{shades-css-var('links', 'text-color')};
-  --#{$prefix}link-border-bottom-width: #{$df-link-border-bottom-width};
-  --#{$prefix}link-border-bottom: #{$df-link-border-bottom};
-  --#{$prefix}link-background: #{shades-css-var('links', 'bg-color')};
-  --#{$prefix}link-hover-border-bottom-width: #{$df-link-hover-border-bottom-width};
-  --#{$prefix}link-hover-color: #{shades-css-var('links', 'text-hover-color')};
-  --#{$prefix}link-hover-background: #{shades-css-var('links', 'bg-hover-color')};
-  --#{$prefix}link-active-color: #{shades-css-var('links', 'text-active-color')};
-  --#{$prefix}link-active-background: #{shades-css-var('links', 'bg-active-color')};
-  --#{$prefix}link-active-border-bottom-width: #{$df-link-active-border-bottom-width};
-  --#{$prefix}link-visited-color: #{shades-css-var('links', 'text-visited-color')};
-  --#{$prefix}link-visited-border-bottom-width: #{$df-link-visited-border-bottom-width};
-  --#{$prefix}link-visited-hover-border-bottom-width: #{$df-link-visited-hover-border-bottom-width};
-  --#{$prefix}link-visited-border-bottom: #{$df-link-visited-border-bottom};
-  --#{$prefix}link-visited-hover-background: #{shades-css-var('links', 'bg-visited-hover-color')};
-  --#{$prefix}link-visited-hover-text-color: #{shades-css-var('links', 'text-visited-hover-color')};
-  --#{$prefix}link-visited-active-text-color: #{shades-css-var('links', 'text-visited-active-color')};
-  --#{$prefix}link-visited-active-background: #{shades-css-var('links', 'bg-visited-active-color')};
-  --#{$prefix}link-visited-active-border-bottom-width: #{$df-link-visited-active-border-bottom-width};
-  --#{$prefix}link-focus-outline: #{$df-link-focus-outline};
-  --#{$prefix}link-focus-outline-offset: #{$df-link-focus-outline-offset};
-  --#{$prefix}link-focus-box-shadow: #{$df-link-focus-box-shadow};
-  --#{$prefix}link-disabled-color: #{$df-link-disabled-color};
-  --#{$prefix}link-disabled-display: #{$df-link-disabled-display};
-  --#{$prefix}link-disabled-cursor: #{$df-link-disabled-cursor};
-  --#{$prefix}link-disabled-text-decoration: #{$df-link-disabled-text-decoration};
-  --#{$prefix}link-disabled-border-bottom-width: #{$df-link-disabled-border-bottom-width};
-  --#{$prefix}link-disabled-border-bottom-color: #{$df-link-disabled-border-bottom-color};
-  --#{$prefix}link-disabled-background: #{$df-link-disabled-background};
-  --#{$prefix}link-external-icon-bottom: #{$df-link-external-icon-bottom};
-  --#{$prefix}link-external-icon-size: #{$df-link-external-icon-size};
-  //TODO: remove link-more with old branding removal
-  --#{$prefix}link-more-text-transform: #{$df-link-more-text-transform};
-  --#{$prefix}link-more-text-decoration-underline: #{$df-link-more-text-decoration-underline};
-  --#{$prefix}link-more-icon-margin-left: #{$df-link-more-icon-margin-left};
-  --#{$prefix}link-more-icon-top: #{$df-link-more-icon-top};
-
-  --#{$prefix}link-icononly-height: #{$df-link-icononly-height};
-  --#{$prefix}link-icononly-height-sm: #{$df-link-icononly-height-sm};
-  --#{$prefix}link-icononly-height-lg: #{$df-link-icononly-height-lg};
-  --#{$prefix}link-icononly-display: #{$df-link-icononly-display};
-  --#{$prefix}link-icononly-align: #{$df-link-icononly-align};
-  --#{$prefix}link-icononly-justify-content: #{$df-link-icononly-justify-content};
-  --#{$prefix}link-icononly-text-align: #{$df-link-icononly-text-align};
-  --#{$prefix}link-icononly-color: #{$df-link-icononly-color};
-  --#{$prefix}link-icononly-decoration: #{$df-link-icononly-decoration};
-  --#{$prefix}link-icononly-border-radius: #{$df-link-icononly-border-radius};
-  --#{$prefix}link-icononly-hover-bg-color: #{$df-link-icononly-hover-bg-color};
-
-  @include df-link();
-
-  &.btn {
-    @include a-btn();
-  }
-
-  &:focus-visible {
-    --#{$prefix}box-shadow-color: #{$df-link-focus-box-shadow-color};
-    box-shadow: var(--#{$prefix}link-focus-box-shadow);
-    outline: var(--#{$prefix}link-focus-outline);
-  }
-
-  @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-    &:hover {
-      --#{$prefix}box-shadow-color: #{shades-css-var('links', 'box-shadow-hover-color')};
-    }
-
-    &:active,
-    &.active {
-      --#{$prefix}box-shadow-color: #{shades-css-var('links', 'box-shadow-active-color')};
-    }
-    transition:
-      color 0.15s ease-in-out,
-      background-color 0.15s ease-in-out,
-      border-color 0.15s ease-in-out,
-      box-shadow 0.15s ease-in-out;
-  }
-
-  &[href*='//'], &[href*='mailto'], &.df-link-external
-  {
-    .fa-external-link {
-      display: none;
-    }
-
-    &:not(.df-link-icononly):after {
-      @include df-link-external-content();
-    }
-  }
-}
-
-.df-link-more {
-  @include df-link-more-normal();
-  border-bottom-width: 0; //needed for old branding brand2023
-
-  &:focus-visible {
-    @include df-link-more-focus();
-  }
-
-  &:hover {
-    @include df-link-more-hover();
-    border-bottom-width: 0; //needed for old branding brand2023
-  }
-}
-
-.df-link-more-disabled {
-  @include df-link-more-disabled();
-
-  &:hover,
-  &:focus-visible {
-    @include df-link-more-disabled();
-  }
-}
-
-.df-link-more-sm {
-  font-size: $font-size-sm;
-}
-
-.df-link-more-lg {
-  font-size: $font-size-lg;
-}
-
-a.df-link-icononly {
-  font-size: $df-link-font-size;
-  border-bottom: 0;
-  border-radius: var(--#{$prefix}link-icononly-border-radius);
-  text-align: var(--#{$prefix}link-icononly-text-align);
-  display: var(--#{$prefix}link-icononly-display);
-  color: var(--#{$prefix}link-icononly-color);
-  text-decoration: var(--#{$prefix}link-icononly-decoration);
-  align-items: var(--#{$prefix}link-icononly-align);
-  justify-content: var(--#{$prefix}link-icononly-justify-content);
-  //overridden by sizing sm and lg
-  line-height: var(--#{$prefix}link-icononly-height);
-  height: var(--#{$prefix}link-icononly-height);
-  width: var(--#{$prefix}link-icononly-height);
-
-  &:hover {
-    color: $df-link-icononly-hover-color;
-    background-color: var(--#{$prefix}link-icononly-hover-bg-color);
-    text-decoration: var(--#{$prefix}link-icononly-decoration);
-  }
-
-  &:focus-visible {
-    --#{$prefix}box-shadow-color: #{$df-link-icononly-focus-box-shadow-color};
-    box-shadow: var(--#{$prefix}link-focus-box-shadow);
-    outline: var(--#{$prefix}link-focus-outline);
-  }
-
-  &:active {
-    color: $df-link-icononly-active-color;
-    background-color: $df-link-icononly-active-bg-color;
-  }
-
-  &.df-link-sm {
-    line-height: var(--#{$prefix}link-icononly-height-sm);
-    height: var(--#{$prefix}link-icononly-height-sm);
-    width: var(--#{$prefix}link-icononly-height-sm);
-    font-size: $df-link-font-size-sm;
-  }
-
-  &.df-link-lg {
-    line-height: var(--#{$prefix}link-icononly-height-lg);
-    height: var(--#{$prefix}link-icononly-height-lg);
-    width: var(--#{$prefix}link-icononly-height-lg);
-    font-size: $df-link-font-size-lg;
-  }
-}