/*------------------------------------*
 *  # Base Constants
 *------------------------------------*/
/* LAYOUT CONSTANTS */
/*------------------------------------*
 *  # SASS Mixins and Functions
 *------------------------------------*/
/*
 * RTL Language Mixin
 */
/*
 * SASS interpolation
 */
/*
 * PX to EM
 * @param $px - px value to be converted
 * @param $base - base font size (in `em`)
 * Note: 'em' values are calculate based on the element font-size
 *       to properly converts 'px' to 'em', please pass in the element font-size with it
 * Usage example:
    padding: em(16px, 1.6em); // font-size in 'em'
 */
/*
 * Set property by passing a property name, and values.
 * @param $property name - padding, margin etc.
 * @param $values        - values in `px` (space separated for multiple values)
 * @param $font-size     - base font-size in `em`
 * Usage example:
   @include toEm(padding, 8px 16px 8px, 1.6em);
 */
/*
 * Generate typefaces key-value pair of variable name and config
 * Example:
   --paragraph-center-bold-black: (14px, center, bold, black)
 */
/*
 * Sets font-size, font-weight, color, text-transform, text-align and line-height
 * Usage example:
   @include setTypeface(16px, bold, black, uppercase);
 */
/*
 * Set typefaces by passing a typeface variable name
 * @param $var   - typeface variable
 * @param $tt    - text-transform property
 * @param $align - text-align property
 * Usage example:
   @include typeface(--paragraph-bold-black, uppercase, center);
 */
/*
 * Range Slider Thumb styling is set here
 */
/*
 * SVG icons colors
 */
/*
 * Bar Spinner Animation
 * @param $count    - number of bars
 * @param $duration - duration of animation
 * @param $phase    - each bar phase change delay
 * Usage example:
   @include createBarspinnerAnimation(5, 1.2s, 0,1);
 */
/*
 * Tooltip colors
 * @param $color - color property
 * Usage example:
   @include tooltipColor(var(--brand-primary));
 */
/*
 * Convert Tooltip colors
 * @param $color - css color property
 * Usage example:
   @include convertTooltipColor(var(--status-default));
 */
/*
    Constants
*/
/*
    Variables
*/
/*
    List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS.
    See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references.
    Variables name example: --title-center-semibold-red
 */
/*
    to use styles without modifier class on .inline-icon
    use @extend

    e.g. style icon on parent hover:
        a:hover .inline-icon {
            @extend %inline-icon-active;
        }
*/
/**
 * Define Breakpoints here.
 */
/** Need to add new breakpoints for mixins */
.quill-navigation-bottom-bar__container {
  display: flex;
  align-items: center;
  height: var(--component-navigationBar-sizing-body-heightBottom);
  padding-left: var(--component-navigationBar-spacing-md);
  padding-right: var(--component-navigationBar-spacing-md);
  gap: var(--component-navigationBar-spacing-sm);
  border-top-style: solid;
  background-color: var(--component-navigationBar-bg-body);
  border-top-width: var(--component-navigationBar-border-width);
  border-top-color: var(--component-navigationBar-border-color);
}
/*------------------------------------*
 *  # Base Constants
 *------------------------------------*/
/* LAYOUT CONSTANTS */
/*------------------------------------*
 *  # SASS Mixins and Functions
 *------------------------------------*/
/*
 * RTL Language Mixin
 */
/*
 * SASS interpolation
 */
/*
 * PX to EM
 * @param $px - px value to be converted
 * @param $base - base font size (in `em`)
 * Note: 'em' values are calculate based on the element font-size
 *       to properly converts 'px' to 'em', please pass in the element font-size with it
 * Usage example:
    padding: em(16px, 1.6em); // font-size in 'em'
 */
/*
 * Set property by passing a property name, and values.
 * @param $property name - padding, margin etc.
 * @param $values        - values in `px` (space separated for multiple values)
 * @param $font-size     - base font-size in `em`
 * Usage example:
   @include toEm(padding, 8px 16px 8px, 1.6em);
 */
/*
 * Generate typefaces key-value pair of variable name and config
 * Example:
   --paragraph-center-bold-black: (14px, center, bold, black)
 */
/*
 * Sets font-size, font-weight, color, text-transform, text-align and line-height
 * Usage example:
   @include setTypeface(16px, bold, black, uppercase);
 */
/*
 * Set typefaces by passing a typeface variable name
 * @param $var   - typeface variable
 * @param $tt    - text-transform property
 * @param $align - text-align property
 * Usage example:
   @include typeface(--paragraph-bold-black, uppercase, center);
 */
/*
 * Range Slider Thumb styling is set here
 */
/*
 * SVG icons colors
 */
/*
 * Bar Spinner Animation
 * @param $count    - number of bars
 * @param $duration - duration of animation
 * @param $phase    - each bar phase change delay
 * Usage example:
   @include createBarspinnerAnimation(5, 1.2s, 0,1);
 */
/*
 * Tooltip colors
 * @param $color - color property
 * Usage example:
   @include tooltipColor(var(--brand-primary));
 */
/*
 * Convert Tooltip colors
 * @param $color - css color property
 * Usage example:
   @include convertTooltipColor(var(--status-default));
 */
/*
    Constants
*/
/*
    Variables
*/
/*
    List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS.
    See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references.
    Variables name example: --title-center-semibold-red
 */
/*
    to use styles without modifier class on .inline-icon
    use @extend

    e.g. style icon on parent hover:
        a:hover .inline-icon {
            @extend %inline-icon-active;
        }
*/
/**
 * Define Breakpoints here.
 */
/** Need to add new breakpoints for mixins */
.quill-navigation-bottom-bar__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  cursor: pointer;
  height: var(--component-navigationBar-sizing-item-md);
  border-radius: var(--component-navigationBar-border-radius);
}

.quill-navigation-bottom-bar__action-selected--true > .quill-navigation-bottom-bar__action-icon svg {
  fill: var(--component-navigationBar-label-color-selected);
}

.quill-navigation-bottom-bar__action-selected--true > .quill-navigation-bottom-bar__action-label {
  color: var(--component-navigationBar-label-color-selected);
}

.quill-navigation-bottom-bar__action-selected--false > .quill-navigation-bottom-bar__action-icon svg {
  fill: var(--component-navigationBar-icon-default);
}

.quill-navigation-bottom-bar__action-badge-container {
  top: -4px;
}

.quill-navigation-bottom-bar__action-label {
  font-size: var(--component-navigationBar-label-typography-xs);
  color: var(--component-navigationBar-label-color-default);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quill-navigation-bottom-bar__action-label-container {
  position: relative;
  width: 100%;
}

.quill-navigation-bottom-bar__action-label-container:before {
  content: " ";
  visibility: hidden;
}
/*------------------------------------*
 *  # Base Constants
 *------------------------------------*/
/* LAYOUT CONSTANTS */
/*------------------------------------*
 *  # SASS Mixins and Functions
 *------------------------------------*/
/*
 * RTL Language Mixin
 */
/*
 * SASS interpolation
 */
/*
 * PX to EM
 * @param $px - px value to be converted
 * @param $base - base font size (in `em`)
 * Note: 'em' values are calculate based on the element font-size
 *       to properly converts 'px' to 'em', please pass in the element font-size with it
 * Usage example:
    padding: em(16px, 1.6em); // font-size in 'em'
 */
/*
 * Set property by passing a property name, and values.
 * @param $property name - padding, margin etc.
 * @param $values        - values in `px` (space separated for multiple values)
 * @param $font-size     - base font-size in `em`
 * Usage example:
   @include toEm(padding, 8px 16px 8px, 1.6em);
 */
/*
 * Generate typefaces key-value pair of variable name and config
 * Example:
   --paragraph-center-bold-black: (14px, center, bold, black)
 */
/*
 * Sets font-size, font-weight, color, text-transform, text-align and line-height
 * Usage example:
   @include setTypeface(16px, bold, black, uppercase);
 */
/*
 * Set typefaces by passing a typeface variable name
 * @param $var   - typeface variable
 * @param $tt    - text-transform property
 * @param $align - text-align property
 * Usage example:
   @include typeface(--paragraph-bold-black, uppercase, center);
 */
/*
 * Range Slider Thumb styling is set here
 */
/*
 * SVG icons colors
 */
/*
 * Bar Spinner Animation
 * @param $count    - number of bars
 * @param $duration - duration of animation
 * @param $phase    - each bar phase change delay
 * Usage example:
   @include createBarspinnerAnimation(5, 1.2s, 0,1);
 */
/*
 * Tooltip colors
 * @param $color - color property
 * Usage example:
   @include tooltipColor(var(--brand-primary));
 */
/*
 * Convert Tooltip colors
 * @param $color - css color property
 * Usage example:
   @include convertTooltipColor(var(--status-default));
 */
/*
    Constants
*/
/*
    Variables
*/
/*
    List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS.
    See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references.
    Variables name example: --title-center-semibold-red
 */
/*
    to use styles without modifier class on .inline-icon
    use @extend

    e.g. style icon on parent hover:
        a:hover .inline-icon {
            @extend %inline-icon-active;
        }
*/
/**
 * Define Breakpoints here.
 */
/** Need to add new breakpoints for mixins */
:root {
  --temp-static-spacing-5: 5px;
  --temp-static-spacing-7: 7px;
  --temp-static-spacing-9: 9px;
  --temp-static-spacing-13: 13px;
  --temp-static-spacing-15: 15px;
  --temp-static-spacing-104: 104px;
  --temp-static-spacing-128: 128px;
  --temp-static-spacing-144: 144px;
  --temp-static-spacing-202: 202px;
  --temp-static-spacing-288: 288px;
  --temp-static-spacing-289: 289px;
  --temp-static-spacing-312: 312px;
  --temp-static-spacing-360: 360px;
}

.quill-link {
  display: inline-flex;
  gap: var(--core-borderRadius-400);
  text-decoration: none;
  cursor: pointer;
  align-items: center;
  color: var(--component-textIcon-normal-prominent);
}

.quill-link__color-black {
  color: var(--component-textIcon-normal-prominent);
}

.quill-link__color-white {
  color: var(--component-textIcon-inverse-prominent);
}

.quill-link--hover, .quill-link:active {
  -webkit-text-decoration: var(--core-fontDecoration-underline);
          text-decoration: var(--core-fontDecoration-underline);
}

.quill-link--disabled {
  pointer-events: none;
  opacity: var(--opacity-disabled);
}

.quill-link__icon-color-black {
  fill: var(--component-textIcon-normal-prominent);
}

.quill-link__icon-color-white {
  fill: var(--component-textIcon-inverse-prominent);
}

.quill-link__icon {
  display: inline-flex;
}

.quill-link__icon-size-caption {
  width: var(--core-borderRadius-400);
  height: var(--core-borderRadius-900);
}

.quill-link__icon-size-sm {
  width: var(--core-borderRadius-400);
  height: var(--core-borderRadius-1100);
}

.quill-link__icon-size-md {
  width: var(--core-borderRadius-500);
  height: var(--core-borderRadius-1200);
}

.quill-link__icon-size-lg {
  width: 13px;
  width: var(--temp-static-spacing-13);
  height: var(--core-borderRadius-1500);
}

.quill-link__icon-size-xl {
  width: 15px;
  width: var(--temp-static-spacing-15);
  height: var(--core-borderRadius-1800);
}
/*------------------------------------*
 *  # Base Constants
 *------------------------------------*/
/* LAYOUT CONSTANTS */
/*------------------------------------*
 *  # SASS Mixins and Functions
 *------------------------------------*/
/*
 * RTL Language Mixin
 */
/*
 * SASS interpolation
 */
/*
 * PX to EM
 * @param $px - px value to be converted
 * @param $base - base font size (in `em`)
 * Note: 'em' values are calculate based on the element font-size
 *       to properly converts 'px' to 'em', please pass in the element font-size with it
 * Usage example:
    padding: em(16px, 1.6em); // font-size in 'em'
 */
/*
 * Set property by passing a property name, and values.
 * @param $property name - padding, margin etc.
 * @param $values        - values in `px` (space separated for multiple values)
 * @param $font-size     - base font-size in `em`
 * Usage example:
   @include toEm(padding, 8px 16px 8px, 1.6em);
 */
/*
 * Generate typefaces key-value pair of variable name and config
 * Example:
   --paragraph-center-bold-black: (14px, center, bold, black)
 */
/*
 * Sets font-size, font-weight, color, text-transform, text-align and line-height
 * Usage example:
   @include setTypeface(16px, bold, black, uppercase);
 */
/*
 * Set typefaces by passing a typeface variable name
 * @param $var   - typeface variable
 * @param $tt    - text-transform property
 * @param $align - text-align property
 * Usage example:
   @include typeface(--paragraph-bold-black, uppercase, center);
 */
/*
 * Range Slider Thumb styling is set here
 */
/*
 * SVG icons colors
 */
/*
 * Bar Spinner Animation
 * @param $count    - number of bars
 * @param $duration - duration of animation
 * @param $phase    - each bar phase change delay
 * Usage example:
   @include createBarspinnerAnimation(5, 1.2s, 0,1);
 */
/*
 * Tooltip colors
 * @param $color - color property
 * Usage example:
   @include tooltipColor(var(--brand-primary));
 */
/*
 * Convert Tooltip colors
 * @param $color - css color property
 * Usage example:
   @include convertTooltipColor(var(--status-default));
 */
/*
    Constants
*/
/*
    Variables
*/
/*
    List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS.
    See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references.
    Variables name example: --title-center-semibold-red
 */
/*
    to use styles without modifier class on .inline-icon
    use @extend

    e.g. style icon on parent hover:
        a:hover .inline-icon {
            @extend %inline-icon-active;
        }
*/
/**
 * Define Breakpoints here.
 */
/** Need to add new breakpoints for mixins */
.quill__color--primary-coral {
  background-color: var(--component-button-bg-coral-primary-default);
  color: var(--component-button-label-color-coral-primary);
  fill: var(--component-button-label-color-coral-primary);
  border: none;
}

.quill__color--primary-coral:hover:not(:disabled) {
  background-color: var(--component-button-bg-coral-primary-hover);
}

.quill__color--primary-coral:active:not(:disabled) {
  background-color: var(--component-button-bg-coral-primary-active);
}

.quill__color--primary-coral:disabled {
  opacity: var(--opacity-disabled);
  background: var(--component-button-bg-coral-primary-default);
}

.quill__color--primary-coral[data-loading=true] {
  background-color: var(--component-button-bg-coral-primary-loading);
}

.quill__color--primary-black {
  background-color: var(--component-button-bg-black-primary-default);
  color: var(--component-button-label-color-black-primary);
  fill: var(--component-button-label-color-black-primary);
  border: none;
}

.quill__color--primary-black:hover:not(:disabled) {
  background-color: var(--component-button-bg-black-primary-hover);
}

.quill__color--primary-black:focus:not(:disabled) {
  background-color: var(--component-button-bg-black-primary-default);
}

.quill__color--primary-black:active:not(:disabled) {
  background-color: var(--component-button-bg-black-primary-active);
}

.quill__color--primary-black:disabled {
  opacity: var(--opacity-disabled);
  background: var(--component-button-bg-black-primary-default);
}

.quill__color--primary-black[data-loading=true] {
  background-color: var(--component-button-bg-black-primary-loading);
}

.quill__color--primary-white {
  background-color: var(--component-button-bg-white-primary-default);
  color: var(--component-button-label-color-white-primary);
  fill: var(--component-button-label-color-white-primary);
  border: none;
}

.quill__color--primary-white:hover:not(:disabled) {
  background-color: var(--component-button-bg-white-primary-hover);
}

.quill__color--primary-white:focus:not(:disabled) {
  background-color: var(--component-button-bg-white-primary-default);
}

.quill__color--primary-white:active:not(:disabled) {
  background-color: var(--component-button-bg-white-primary-active);
}

.quill__color--primary-white:disabled {
  opacity: var(--opacity-disabled);
  background: var(--component-button-bg-white-primary-default);
}

.quill__color--primary-white[data-loading=true] {
  background-color: var(--component-button-bg-white-primary-loading);
}

.quill__color--primary-purchase {
  background-color: var(--component-button-bg-buy-primary-default);
  color: var(--component-button-label-color-buy-primary);
  fill: var(--component-button-label-color-buy-primary);
  border: none;
}

.quill__color--primary-purchase:hover:not(:disabled) {
  background-color: var(--component-button-bg-buy-primary-hover);
}

.quill__color--primary-purchase:focus:not(:disabled) {
  background-color: var(--component-button-bg-buy-primary-default);
}

.quill__color--primary-purchase:active:not(:disabled) {
  background-color: var(--component-button-bg-buy-primary-active);
}

.quill__color--primary-purchase:disabled {
  opacity: var(--opacity-disabled);
  background: var(--component-button-bg-buy-primary-default);
}

.quill__color--primary-purchase[data-loading=true] {
  background-color: var(--component-button-bg-buy-primary-loading);
}

.quill__color--primary-sell {
  background-color: var(--component-button-bg-sell-primary-default);
  color: var(--component-button-label-color-sell-primary);
  fill: var(--component-button-label-color-sell-primary);
  border: none;
}

.quill__color--primary-sell:hover:not(:disabled) {
  background-color: var(--component-button-bg-sell-primary-hover);
}

.quill__color--primary-sell:focus:not(:disabled) {
  background-color: var(--component-button-bg-sell-primary-default);
}

.quill__color--primary-sell:active:not(:disabled) {
  background-color: var(--component-button-bg-sell-primary-active);
}

.quill__color--primary-sell:disabled {
  opacity: var(--opacity-disabled);
  background: var(--component-button-bg-sell-primary-default);
}

.quill__color--primary-sell[data-loading=true] {
  background-color: var(--component-button-bg-sell-primary-loading);
}

.quill__color--primary-black-white {
  background-color: var(--component-button-bg-blackWhite-primary-default);
  color: var(--component-button-label-color-blackWhite-primary);
  fill: var(--component-button-label-color-blackWhite-primary);
  border: none;
}

.quill__color--primary-black-white:hover:not(:disabled) {
  background-color: var(--component-button-bg-blackWhite-primary-hover);
}

.quill__color--primary-black-white:focus:not(:disabled) {
  background-color: var(--component-button-bg-blackWhite-primary-default);
}

.quill__color--primary-black-white:active:not(:disabled) {
  background-color: var(--component-button-bg-blackWhite-primary-active);
}

.quill__color--primary-black-white:disabled {
  opacity: var(--opacity-disabled);
  background: var(--component-button-bg-blackWhite-primary-default);
}

.quill__color--primary-black-white[data-loading=true] {
  background-color: var(--component-button-bg-blackWhite-primary-loading);
}

.quill__color--primary-white-black {
  background-color: var(--component-button-bg-whiteBlack-primary-default);
  color: var(--component-button-label-color-whiteBlack-primary);
  fill: var(--component-button-label-color-whiteBlack-primary);
  border: none;
}

.quill__color--primary-white-black:hover:not(:disabled) {
  background-color: var(--component-button-bg-whiteBlack-primary-hover);
}

.quill__color--primary-white-black:focus:not(:disabled) {
  background-color: var(--component-button-bg-whiteBlack-primary-default);
}

.quill__color--primary-white-black:active:not(:disabled) {
  background-color: var(--component-button-bg-whiteBlack-primary-active);
}

.quill__color--primary-white-black:disabled {
  opacity: var(--opacity-disabled);
  background: var(--component-button-bg-whiteBlack-primary-default);
}

.quill__color--primary-white-black[data-loading=true] {
  background-color: var(--component-button-bg-whiteBlack-primary-loading);
}

.quill__color--secondary-coral {
  background-color: transparent;
  border-style: solid;
  border-color: var(--component-button-border-color-coral);
  color: var(--component-button-label-color-coral-secondary);
  fill: var(--component-button-label-color-coral-secondary);
}

.quill__color--secondary-coral:hover:not(:disabled) {
  background-color: var(--component-button-bg-coral-secondary-hover);
}

.quill__color--secondary-coral:focus:not(:disabled) {
  background-color: transparent;
}

.quill__color--secondary-coral:active:not(:disabled) {
  background-color: var(--component-button-bg-coral-secondary-active);
}

.quill__color--secondary-coral:disabled {
  opacity: var(--opacity-disabled);
  background: transparent;
}

.quill__color--secondary-coral[data-loading=true] {
  background-color: var(--component-button-bg-coral-secondary-loading);
}

.quill__color--secondary-black {
  background-color: transparent;
  border-style: solid;
  border-color: var(--component-button-border-color-black);
  color: var(--component-button-label-color-black-secondary);
  fill: var(--component-button-label-color-black-secondary);
}

.quill__color--secondary-black:hover:not(:disabled) {
  background-color: var(--component-button-bg-black-secondary-hover);
}

.quill__color--secondary-black:focus:not(:disabled) {
  background-color: transparent;
}

.quill__color--secondary-black:active:not(:disabled) {
  background-color: var(--component-button-bg-black-secondary-active);
}

.quill__color--secondary-black:disabled {
  opacity: var(--opacity-disabled);
  background: transparent;
}

.quill__color--secondary-black[data-loading=true] {
  background-color: var(--component-button-bg-black-secondary-loading);
}

.quill__color--secondary-white {
  background-color: transparent;
  border-style: solid;
  border-color: var(--component-button-border-color-white);
  color: var(--component-button-label-color-white-secondary);
  fill: var(--component-button-label-color-white-secondary);
}

.quill__color--secondary-white:hover:not(:disabled) {
  background-color: var(--component-button-bg-white-secondary-hover);
}

.quill__color--secondary-white:focus:not(:disabled) {
  background-color: transparent;
}

.quill__color--secondary-white:active:not(:disabled) {
  background-color: var(--component-button-bg-white-secondary-active);
}

.quill__color--secondary-white:disabled {
  opacity: var(--opacity-disabled);
  background: transparent;
}

.quill__color--secondary-white[data-loading=true] {
  background-color: var(--component-button-bg-white-secondary-loading);
}

.quill__color--secondary-purchase {
  background-color: transparent;
  border-style: solid;
  border-color: var(--component-button-border-color-buy);
  color: var(--component-button-label-color-buy-secondary);
  fill: var(--component-button-label-color-buy-secondary);
}

.quill__color--secondary-purchase:hover:not(:disabled) {
  background-color: var(--component-button-bg-buy-secondary-hover);
}

.quill__color--secondary-purchase:focus:not(:disabled) {
  background-color: transparent;
}

.quill__color--secondary-purchase:active:not(:disabled) {
  background-color: var(--component-button-bg-buy-secondary-active);
}

.quill__color--secondary-purchase:disabled {
  opacity: var(--opacity-disabled);
  background: transparent;
}

.quill__color--secondary-purchase[data-loading=true] {
  background-color: var(--component-button-bg-buy-secondary-loading);
}

.quill__color--secondary-sell {
  background-color: transparent;
  border-style: solid;
  border-color: var(--component-button-border-color-sell);
  color: var(--component-button-label-color-sell-secondary);
  fill: var(--component-button-label-color-sell-secondary);
}

.quill__color--secondary-sell:hover:not(:disabled) {
  background-color: var(--component-button-bg-sell-secondary-hover);
}

.quill__color--secondary-sell:focus:not(:disabled) {
  background-color: transparent;
}

.quill__color--secondary-sell:active:not(:disabled) {
  background-color: var(--component-button-bg-sell-secondary-active);
}

.quill__color--secondary-sell:disabled {
  opacity: var(--opacity-disabled);
  background: transparent;
}

.quill__color--secondary-sell[data-loading=true] {
  background-color: var(--component-button-bg-sell-secondary-loading);
}

.quill__color--secondary-black-white {
  background-color: transparent;
  border-style: solid;
  border-color: var(--component-button-border-color-blackWhite);
  color: var(--component-button-label-color-blackWhite-secondary);
  fill: var(--component-button-label-color-blackWhite-secondary);
}

.quill__color--secondary-black-white:hover:not(:disabled) {
  background-color: var(--component-button-bg-blackWhite-secondary-hover);
}

.quill__color--secondary-black-white:focus:not(:disabled) {
  background-color: transparent;
}

.quill__color--secondary-black-white:active:not(:disabled) {
  background-color: var(--component-button-bg-blackWhite-secondary-active);
}

.quill__color--secondary-black-white:disabled {
  opacity: var(--opacity-disabled);
  background: transparent;
}

.quill__color--secondary-black-white[data-loading=true] {
  background-color: var(--component-button-bg-blackWhite-secondary-loading);
}

.quill__color--secondary-white-black {
  background-color: transparent;
  border-style: solid;
  border-color: var(--component-button-border-color-whiteBlack);
  color: var(--component-button-label-color-whiteBlack-secondary);
  fill: var(--component-button-label-color-whiteBlack-secondary);
}

.quill__color--secondary-white-black:hover:not(:disabled) {
  background-color: var(--component-button-bg-whiteBlack-secondary-hover);
}

.quill__color--secondary-white-black:focus:not(:disabled) {
  background-color: transparent;
}

.quill__color--secondary-white-black:active:not(:disabled) {
  background-color: var(--component-button-bg-whiteBlack-secondary-active);
}

.quill__color--secondary-white-black:disabled {
  opacity: var(--opacity-disabled);
  background: transparent;
}

.quill__color--secondary-white-black[data-loading=true] {
  background-color: var(--component-button-bg-whiteBlack-secondary-loading);
}

.quill__color--tertiary-coral {
  background-color: transparent;
  color: var(--component-button-label-color-coral-tertiary);
  fill: var(--component-button-label-color-coral-tertiary);
  text-decoration: underline;
  border: none;
}

.quill__color--tertiary-coral:hover:not(:disabled) {
  background-color: var(--component-button-bg-coral-tertiary-hover);
}

.quill__color--tertiary-coral:focus:not(:disabled) {
  background-color: transparent;
}

.quill__color--tertiary-coral:active:not(:disabled) {
  background-color: var(--component-button-bg-coral-tertiary-active);
}

.quill__color--tertiary-coral:disabled {
  opacity: var(--opacity-disabled);
  background: transparent;
}

.quill__color--tertiary-coral[data-loading=true] {
  background-color: var(--component-button-bg-coral-tertiary-loading);
}

.quill__color--tertiary-black {
  background-color: transparent;
  color: var(--component-button-label-color-black-tertiary);
  fill: var(--component-button-label-color-black-tertiary);
  text-decoration: underline;
  border: none;
}

.quill__color--tertiary-black:hover:not(:disabled) {
  background-color: var(--component-button-bg-black-tertiary-hover);
}

.quill__color--tertiary-black:focus:not(:disabled) {
  background-color: transparent;
}

.quill__color--tertiary-black:active:not(:disabled) {
  background-color: var(--component-button-bg-black-tertiary-active);
}

.quill__color--tertiary-black:disabled {
  opacity: var(--opacity-disabled);
  background: transparent;
}

.quill__color--tertiary-black[data-loading=true] {
  background-color: var(--component-button-bg-black-tertiary-loading);
}

.quill__color--tertiary-white {
  background-color: transparent;
  color: var(--component-button-label-color-white-tertiary);
  fill: var(--component-button-label-color-white-tertiary);
  text-decoration: underline;
  border: none;
}

.quill__color--tertiary-white:hover:not(:disabled) {
  background-color: var(--component-button-bg-white-tertiary-hover);
}

.quill__color--tertiary-white:focus:not(:disabled) {
  background-color: transparent;
}

.quill__color--tertiary-white:active:not(:disabled) {
  background-color: var(--component-button-bg-white-tertiary-active);
}

.quill__color--tertiary-white:disabled {
  opacity: var(--opacity-disabled);
  background: transparent;
}

.quill__color--tertiary-white[data-loading=true] {
  background-color: var(--component-button-bg-white-tertiary-loading);
}

.quill__color--tertiary-purchase {
  background-color: transparent;
  color: var(--component-button-label-color-buy-tertiary);
  fill: var(--component-button-label-color-buy-tertiary);
  text-decoration: underline;
  border: none;
}

.quill__color--tertiary-purchase:hover:not(:disabled) {
  background-color: var(--component-button-bg-buy-tertiary-hover);
}

.quill__color--tertiary-purchase:focus:not(:disabled) {
  background-color: transparent;
}

.quill__color--tertiary-purchase:active:not(:disabled) {
  background-color: var(--component-button-bg-buy-tertiary-active);
}

.quill__color--tertiary-purchase:disabled {
  opacity: var(--opacity-disabled);
  background: transparent;
}

.quill__color--tertiary-purchase[data-loading=true] {
  background-color: var(--component-button-bg-buy-tertiary-loading);
}

.quill__color--tertiary-sell {
  background-color: transparent;
  color: var(--component-button-label-color-sell-tertiary);
  fill: var(--component-button-label-color-sell-tertiary);
  text-decoration: underline;
  border: none;
}

.quill__color--tertiary-sell:hover:not(:disabled) {
  background-color: var(--component-button-bg-sell-tertiary-hover);
}

.quill__color--tertiary-sell:focus:not(:disabled) {
  background-color: transparent;
}

.quill__color--tertiary-sell:active:not(:disabled) {
  background-color: var(--component-button-bg-sell-tertiary-active);
}

.quill__color--tertiary-sell:disabled {
  opacity: var(--opacity-disabled);
  background: transparent;
}

.quill__color--tertiary-sell[data-loading=true] {
  background-color: var(--component-button-bg-sell-tertiary-loading);
}

.quill__color--tertiary-black-white {
  background-color: transparent;
  color: var(--component-button-label-color-blackWhite-tertiary);
  fill: var(--component-button-label-color-blackWhite-tertiary);
  text-decoration: underline;
  border: none;
}

.quill__color--tertiary-black-white:hover:not(:disabled) {
  background-color: var(--component-button-bg-blackWhite-tertiary-hover);
}

.quill__color--tertiary-black-white:focus:not(:disabled) {
  background-color: transparent;
}

.quill__color--tertiary-black-white:active:not(:disabled) {
  background-color: var(--component-button-bg-blackWhite-tertiary-active);
}

.quill__color--tertiary-black-white:disabled {
  opacity: var(--opacity-disabled);
  background: transparent;
}

.quill__color--tertiary-black-white[data-loading=true] {
  background-color: var(--component-button-bg-blackWhite-tertiary-loading);
}

.quill__color--tertiary-white-black {
  background-color: transparent;
  color: var(--component-button-label-color-whiteBlack-tertiary);
  fill: var(--component-button-label-color-whiteBlack-tertiary);
  text-decoration: underline;
  border: none;
}

.quill__color--tertiary-white-black:hover:not(:disabled) {
  background-color: var(--component-button-bg-whiteBlack-tertiary-hover);
}

.quill__color--tertiary-white-black:focus:not(:disabled) {
  background-color: transparent;
}

.quill__color--tertiary-white-black:active:not(:disabled) {
  background-color: var(--component-button-bg-whiteBlack-tertiary-active);
}

.quill__color--tertiary-white-black:disabled {
  opacity: var(--opacity-disabled);
  background: transparent;
}

.quill__color--tertiary-white-black[data-loading=true] {
  background-color: var(--component-button-bg-whiteBlack-tertiary-loading);
}

.quill-icon-button__size--sm {
  min-height: var(--component-button-height-sm);
  min-width: var(--component-button-width-sm);
  border-radius: var(--component-button-border-radius-sm);
  border-width: var(--component-button-border-width-sm);
}

.quill-icon-button__size--md {
  min-height: var(--component-button-height-md);
  min-width: var(--component-button-width-md);
  border-radius: var(--component-button-border-radius-md);
  border-width: var(--component-button-border-width-sm);
}

.quill-icon-button__size--lg {
  min-height: var(--component-button-height-lg);
  min-width: var(--component-button-width-lg);
  border-radius: var(--component-button-border-radius-lg);
  border-width: var(--component-button-border-width-sm);
}

.quill-icon-button__size--xl {
  min-height: var(--component-button-height-xl);
  min-width: var(--component-button-width-xl);
  border-radius: var(--component-button-border-radius-xl);
  border-width: var(--component-button-border-width-md);
}

.quill-button {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  outline-offset: 3px;
}

.quill-button:disabled {
  cursor: auto;
}

.quill-button__size--sm {
  padding-left: var(--component-button-spacing-padding-sm);
  padding-right: var(--component-button-spacing-padding-sm);
  height: var(--component-button-height-sm);
  border-radius: var(--component-button-border-radius-sm);
  gap: var(--component-button-spacing-gap-sm);
  border-width: var(--component-button-border-width-sm);
}

.quill-button__size--md {
  padding-left: var(--component-button-spacing-padding-md);
  padding-right: var(--component-button-spacing-padding-md);
  height: var(--component-button-height-md);
  border-radius: var(--component-button-border-radius-md);
  gap: var(--component-button-spacing-gap-md);
  border-width: var(--component-button-border-width-sm);
}

.quill-button__size--lg {
  padding-left: var(--component-button-spacing-padding-lg);
  padding-right: var(--component-button-spacing-padding-lg);
  height: var(--component-button-height-lg);
  border-radius: var(--component-button-border-radius-lg);
  gap: var(--component-button-spacing-gap-lg);
  border-width: var(--component-button-border-width-sm);
}

.quill-button__size--xl {
  padding-left: var(--component-button-spacing-padding-xl);
  padding-right: var(--component-button-spacing-padding-xl);
  height: var(--component-button-height-xl);
  border-radius: var(--component-button-border-radius-xl);
  gap: var(--component-button-spacing-gap-xl);
  border-width: var(--component-button-border-width-md);
}

.quill-button__transform {
  transition-property: transform;
  transition-duration: var(--core-motion-duration-200);
  transition-timing-function: ease-in-out;
}

.quill-button__transform-rotate {
  transform: rotate(180deg);
}

.quill-button__loader-icon {
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.quill-button__white-bg-wrapper {
  background-color: var(--core-color-solid-slate-50);
  padding: 0;
  padding: initial;
  height: -moz-fit-content;
  height: fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.quill-button__full-width {
  width: 100%;
}

.quill-button-label {
  text-wrap: nowrap;
}
/*------------------------------------*
 *  # Base Constants
 *------------------------------------*/
/* LAYOUT CONSTANTS */
/*------------------------------------*
 *  # SASS Mixins and Functions
 *------------------------------------*/
/*
 * RTL Language Mixin
 */
/*
 * SASS interpolation
 */
/*
 * PX to EM
 * @param $px - px value to be converted
 * @param $base - base font size (in `em`)
 * Note: 'em' values are calculate based on the element font-size
 *       to properly converts 'px' to 'em', please pass in the element font-size with it
 * Usage example:
    padding: em(16px, 1.6em); // font-size in 'em'
 */
/*
 * Set property by passing a property name, and values.
 * @param $property name - padding, margin etc.
 * @param $values        - values in `px` (space separated for multiple values)
 * @param $font-size     - base font-size in `em`
 * Usage example:
   @include toEm(padding, 8px 16px 8px, 1.6em);
 */
/*
 * Generate typefaces key-value pair of variable name and config
 * Example:
   --paragraph-center-bold-black: (14px, center, bold, black)
 */
/*
 * Sets font-size, font-weight, color, text-transform, text-align and line-height
 * Usage example:
   @include setTypeface(16px, bold, black, uppercase);
 */
/*
 * Set typefaces by passing a typeface variable name
 * @param $var   - typeface variable
 * @param $tt    - text-transform property
 * @param $align - text-align property
 * Usage example:
   @include typeface(--paragraph-bold-black, uppercase, center);
 */
/*
 * Range Slider Thumb styling is set here
 */
/*
 * SVG icons colors
 */
/*
 * Bar Spinner Animation
 * @param $count    - number of bars
 * @param $duration - duration of animation
 * @param $phase    - each bar phase change delay
 * Usage example:
   @include createBarspinnerAnimation(5, 1.2s, 0,1);
 */
/*
 * Tooltip colors
 * @param $color - color property
 * Usage example:
   @include tooltipColor(var(--brand-primary));
 */
/*
 * Convert Tooltip colors
 * @param $color - css color property
 * Usage example:
   @include convertTooltipColor(var(--status-default));
 */
/*
    Constants
*/
/*
    Variables
*/
/*
    List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS.
    See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references.
    Variables name example: --title-center-semibold-red
 */
/*
    to use styles without modifier class on .inline-icon
    use @extend

    e.g. style icon on parent hover:
        a:hover .inline-icon {
            @extend %inline-icon-active;
        }
*/
/**
 * Define Breakpoints here.
 */
/** Need to add new breakpoints for mixins */
.react-calendar {
  width: 350px;
  max-width: 100%;
  background: #fff;
  border: 1px solid #a0a096;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.125em;
}

.react-calendar--doubleView {
  width: 700px;
}

.react-calendar--doubleView .react-calendar__viewContainer {
  display: flex;
  margin: -0.5em;
}

.react-calendar--doubleView .react-calendar__viewContainer > * {
  width: 50%;
  margin: 0.5em;
}

.react-calendar, .react-calendar *, .react-calendar *:before, .react-calendar *:after {
  box-sizing: border-box;
}

.react-calendar button {
  margin: 0;
  border: 0;
  outline: none;
}

.react-calendar button:enabled:hover {
  cursor: pointer;
}

.react-calendar__navigation {
  display: flex;
  height: 44px;
  margin-bottom: 1em;
}

.react-calendar__navigation button {
  min-width: 44px;
  background: none;
}

.react-calendar__navigation button:disabled {
  background-color: #f0f0f0;
}

.react-calendar__navigation button:enabled:hover, .react-calendar__navigation button:enabled:focus {
  background-color: #e6e6e6;
}

.react-calendar__month-view__weekdays {
  text-align: center;
  text-transform: uppercase;
  font: inherit;
  font-size: 0.75em;
  font-weight: 700;
}

.react-calendar__month-view__weekdays__weekday {
  padding: 0.5em;
}

.react-calendar__month-view__weekNumbers .react-calendar__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 0.75em;
  font-weight: 700;
}

.react-calendar__month-view__days__day--weekend {
  color: #d10000;
}

.react-calendar__month-view__days__day--neighboringMonth, .react-calendar__decade-view__years__year--neighboringDecade, .react-calendar__century-view__decades__decade--neighboringCentury {
  color: #757575;
}

.react-calendar__year-view .react-calendar__tile, .react-calendar__decade-view .react-calendar__tile, .react-calendar__century-view .react-calendar__tile {
  padding: 2em 0.5em;
}

.react-calendar__tile {
  max-width: 100%;
  padding: 10px 6.6667px;
  background: none;
  text-align: center;
  font: inherit;
  font-size: 0.833em;
}

.react-calendar__tile:disabled {
  background-color: #f0f0f0;
  color: #ababab;
}

.react-calendar__month-view__days__day--neighboringMonth:disabled, .react-calendar__decade-view__years__year--neighboringDecade:disabled, .react-calendar__century-view__decades__decade--neighboringCentury:disabled {
  color: #cdcdcd;
}

.react-calendar__tile:enabled:hover, .react-calendar__tile:enabled:focus {
  background-color: #e6e6e6;
}

.react-calendar__tile--now {
  background: #ffff76;
}

.react-calendar__tile--now:enabled:hover, .react-calendar__tile--now:enabled:focus {
  background: #ffffa9;
}

.react-calendar__tile--hasActive {
  background: #76baff;
}

.react-calendar__tile--hasActive:enabled:hover, .react-calendar__tile--hasActive:enabled:focus {
  background: #a9d4ff;
}

.react-calendar__tile--active {
  background: #006edc;
  color: #fff;
}

.react-calendar__tile--active:enabled:hover, .react-calendar__tile--active:enabled:focus {
  background: #1087ff;
}

.react-calendar--selectRange .react-calendar__tile--hover {
  background-color: #e6e6e6;
}

.quill-date-picker {
  border: none;
  background-color: var(--semantic-color-slate-solid-surface-frame-low);
  width: auto;
  width: initial;
}

@media (min-width: 768px) {
  .quill-date-picker {
    padding: var(--component-actionSheet-spacing-padding-md);
  }
}
.quill-date-picker__wrapper--fixed-width {
  width: 100%;
}

@media (min-width: 768px) {
  .quill-date-picker__wrapper--fixed-width {
    width: var(--component-dropdownList-width-dateRangePicker-sm);
  }
}
.quill-date-picker__wrapper--fixed-width .no-current-day-marker.react-calendar__tile--now:after {
  display: none !important;
}

.quill-date-picker .react-calendar__navigation {
  height: var(--core-size-1600);
  margin-bottom: var(--semantic-spacing-general-md);
}

.quill-date-picker .react-calendar__navigation button:enabled:hover, .quill-date-picker .react-calendar__navigation button:enabled:focus, .quill-date-picker .react-calendar__navigation button:disabled {
  background-color: transparent;
  background-color: initial;
  opacity: var(--opacity-disabled);
}

.quill-date-picker .react-calendar__navigation button.react-calendar__navigation__arrow:enabled:focus {
  border-radius: var(--core-borderRadius-600);
  background-color: var(--semantic-color-monochrome-surface-normal-low);
}

.quill-date-picker .react-calendar__navigation button.react-calendar__navigation__arrow:enabled:active {
  border-radius: var(--core-borderRadius-600);
  background-color: var(--semantic-color-monochrome-surface-normal-low);
}

.quill-date-picker .react-calendar__navigation button.react-calendar__navigation__label:enabled:focus span {
  color: var(-component-dropdownItem-label-color-selected);
  font-weight: var(--semantic-typography-body-sm-bold-default-fontWeight);
}

.quill-date-picker .react-calendar__navigation button.react-calendar__navigation__label:disabled span {
  color: var(-component-dropdownItem-label-color-selected);
  font-weight: var(--semantic-typography-body-sm-bold-default-fontWeight);
}

.quill-date-picker .react-calendar__navigation button.react-calendar__navigation__label:enabled:active span {
  color: var(-component-dropdownItem-label-color-selected);
  font-weight: var(--semantic-typography-body-sm-bold-default-fontWeight);
}

@media (hover: hover) {
  .quill-date-picker .react-calendar__navigation button.react-calendar__navigation__arrow:enabled:hover {
    border-radius: var(--core-borderRadius-600);
    background-color: var(--semantic-color-monochrome-surface-normal-low);
  }
  .quill-date-picker .react-calendar__navigation button.react-calendar__navigation__label:enabled:hover span {
    color: var(--component-textIcon-normal-prominent);
  }
}
.quill-date-picker .react-calendar__navigation__arrow.react-calendar__navigation__prev-button, .quill-date-picker .react-calendar__navigation__arrow.react-calendar__navigation__prev2-button, .quill-date-picker .react-calendar__navigation__arrow.react-calendar__navigation__next-button, .quill-date-picker .react-calendar__navigation__arrow.react-calendar__navigation__next2-button {
  min-width: var(--core-size-1600);
  text-align: center;
}

.quill-date-picker .react-calendar__navigation__label {
  text-align: center;
}

.quill-date-picker .react-calendar__month-view__weekdays {
  height: var(--core-size-2400);
  color: var(--component-textIcon-normal-disabled);
  text-transform: none;
  font-family: var(--core-fontFamily-ibmPlex-sans);
  font-size: var(--core-fontSize-100);
  font-weight: var(--core-fontWeight-regular);
  line-height: var(--core-lineHeight-300);
  letter-spacing: normal;
}

.quill-date-picker .react-calendar__month-view__weekdays__weekday {
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.quill-date-picker .react-calendar__month-view__days__day {
  color: var(--component-dropdownItem-label-color-default);
  border-radius: var(--component-dropdownItem-border-radius);
  aspect-ratio: 1;
}

.quill-date-picker .react-calendar__month-view__days__day--neighboringMonth {
  color: var(--component-textIcon-normal-disabled);
}

.quill-date-picker .react-calendar__century-view__decades, .quill-date-picker .react-calendar__decade-view__years, .quill-date-picker .react-calendar__year-view__months {
  flex-direction: column;
}

.quill-date-picker .react-calendar__year-view .react-calendar__tile, .quill-date-picker .react-calendar__decade-view .react-calendar__tile, .quill-date-picker .react-calendar__century-view .react-calendar__tile {
  padding: 0px var(--component-actionSheet-spacing-padding-md);
  min-height: var(--core-size-2400);
  border-radius: var(--component-dropdownItem-border-radius);
  color: var(--component-dropdownItem-label-color-default);
}

.quill-date-picker .react-calendar__year-view .react-calendar__tile--hasActive, .quill-date-picker .react-calendar__year-view .react-calendar__tile--hasActive:enabled:hover, .quill-date-picker .react-calendar__decade-view .react-calendar__tile--hasActive, .quill-date-picker .react-calendar__decade-view .react-calendar__tile--hasActive:enabled:hover, .quill-date-picker .react-calendar__century-view .react-calendar__tile--hasActive, .quill-date-picker .react-calendar__century-view .react-calendar__tile--hasActive:enabled:hover {
  color: var(--component-dropdownItem-label-color-selectedWhite);
}

.quill-date-picker .react-calendar__tile {
  font-family: var(--core-fontFamily-ibmPlex-sans);
  font-size: inherit;
}

.quill-date-picker .react-calendar__tile:enabled:hover, .quill-date-picker .react-calendar__tile:enabled:focus {
  background-color: var(--semantic-color-monochrome-surface-normal-low);
}

.quill-date-picker .react-calendar__tile:disabled {
  background-color: transparent;
  background-color: initial;
  color: var(--component-dropdownItem-label-color-disabled);
}

.quill-date-picker .react-calendar__tile--range {
  border-radius: 0;
  border-radius: initial;
}

.quill-date-picker .react-calendar__tile--rangeStart {
  border-top-left-radius: var(--component-dropdownItem-border-radius);
  border-bottom-left-radius: var(--component-dropdownItem-border-radius);
}

.quill-date-picker .react-calendar__tile--rangeEnd {
  border-top-right-radius: var(--component-dropdownItem-border-radius);
  border-bottom-right-radius: var(--component-dropdownItem-border-radius);
}

.quill-date-picker .react-calendar__tile--now {
  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
  background: initial;
  color: var(--component-dropdownItem-label-color-default);
  position: relative;
}

.quill-date-picker .react-calendar__tile--now.react-calendar__tile--hover, .quill-date-picker .react-calendar__tile--now:enabled:hover, .quill-date-picker .react-calendar__tile--now:enabled:focus {
  background-color: var(--semantic-color-monochrome-surface-normal-low);
}

.quill-date-picker .react-calendar__tile--now:after {
  content: "";
  width: var(--core-size-200);
  height: var(--core-size-200);
  border-radius: 50%;
  position: absolute;
  top: 70%;
  left: calc(50% - var(--core-size-200) / 2);
  background-color: var(--component-dropdownItem-label-color-default);
}

.quill-date-picker .react-calendar__tile--active, .quill-date-picker .react-calendar__tile--active:enabled:hover, .quill-date-picker .react-calendar__tile--active:enabled:focus, .quill-date-picker .react-calendar__tile--hasActive, .quill-date-picker .react-calendar__tile--hasActive:enabled:hover {
  background-color: var(--component-dropdownItem-bg-selected);
  color: var(--component-dropdownItem-label-color-selectedWhite);
}

.quill-date-picker .react-calendar__viewContainer {
  overflow-y: auto;
  aspect-ratio: 1.12;
}

.quill-date-picker abbr[title] {
  text-decoration: none;
}
/*------------------------------------*
 *  # Base Constants
 *------------------------------------*/
/* LAYOUT CONSTANTS */
/*------------------------------------*
 *  # SASS Mixins and Functions
 *------------------------------------*/
/*
 * RTL Language Mixin
 */
/*
 * SASS interpolation
 */
/*
 * PX to EM
 * @param $px - px value to be converted
 * @param $base - base font size (in `em`)
 * Note: 'em' values are calculate based on the element font-size
 *       to properly converts 'px' to 'em', please pass in the element font-size with it
 * Usage example:
    padding: em(16px, 1.6em); // font-size in 'em'
 */
/*
 * Set property by passing a property name, and values.
 * @param $property name - padding, margin etc.
 * @param $values        - values in `px` (space separated for multiple values)
 * @param $font-size     - base font-size in `em`
 * Usage example:
   @include toEm(padding, 8px 16px 8px, 1.6em);
 */
/*
 * Generate typefaces key-value pair of variable name and config
 * Example:
   --paragraph-center-bold-black: (14px, center, bold, black)
 */
/*
 * Sets font-size, font-weight, color, text-transform, text-align and line-height
 * Usage example:
   @include setTypeface(16px, bold, black, uppercase);
 */
/*
 * Set typefaces by passing a typeface variable name
 * @param $var   - typeface variable
 * @param $tt    - text-transform property
 * @param $align - text-align property
 * Usage example:
   @include typeface(--paragraph-bold-black, uppercase, center);
 */
/*
 * Range Slider Thumb styling is set here
 */
/*
 * SVG icons colors
 */
/*
 * Bar Spinner Animation
 * @param $count    - number of bars
 * @param $duration - duration of animation
 * @param $phase    - each bar phase change delay
 * Usage example:
   @include createBarspinnerAnimation(5, 1.2s, 0,1);
 */
/*
 * Tooltip colors
 * @param $color - color property
 * Usage example:
   @include tooltipColor(var(--brand-primary));
 */
/*
 * Convert Tooltip colors
 * @param $color - css color property
 * Usage example:
   @include convertTooltipColor(var(--status-default));
 */
/*
    Constants
*/
/*
    Variables
*/
/*
    List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS.
    See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references.
    Variables name example: --title-center-semibold-red
 */
/*
    to use styles without modifier class on .inline-icon
    use @extend

    e.g. style icon on parent hover:
        a:hover .inline-icon {
            @extend %inline-icon-active;
        }
*/
/**
 * Define Breakpoints here.
 */
/** Need to add new breakpoints for mixins */
.quill-dropdown__divider {
  height: var(--core-spacing-75);
  background-color: var(--core-color-opacity-black-100);
  width: 100%;
}
/*------------------------------------*
 *  # Base Constants
 *------------------------------------*/
/* LAYOUT CONSTANTS */
/*------------------------------------*
 *  # SASS Mixins and Functions
 *------------------------------------*/
/*
 * RTL Language Mixin
 */
/*
 * SASS interpolation
 */
/*
 * PX to EM
 * @param $px - px value to be converted
 * @param $base - base font size (in `em`)
 * Note: 'em' values are calculate based on the element font-size
 *       to properly converts 'px' to 'em', please pass in the element font-size with it
 * Usage example:
    padding: em(16px, 1.6em); // font-size in 'em'
 */
/*
 * Set property by passing a property name, and values.
 * @param $property name - padding, margin etc.
 * @param $values        - values in `px` (space separated for multiple values)
 * @param $font-size     - base font-size in `em`
 * Usage example:
   @include toEm(padding, 8px 16px 8px, 1.6em);
 */
/*
 * Generate typefaces key-value pair of variable name and config
 * Example:
   --paragraph-center-bold-black: (14px, center, bold, black)
 */
/*
 * Sets font-size, font-weight, color, text-transform, text-align and line-height
 * Usage example:
   @include setTypeface(16px, bold, black, uppercase);
 */
/*
 * Set typefaces by passing a typeface variable name
 * @param $var   - typeface variable
 * @param $tt    - text-transform property
 * @param $align - text-align property
 * Usage example:
   @include typeface(--paragraph-bold-black, uppercase, center);
 */
/*
 * Range Slider Thumb styling is set here
 */
/*
 * SVG icons colors
 */
/*
 * Bar Spinner Animation
 * @param $count    - number of bars
 * @param $duration - duration of animation
 * @param $phase    - each bar phase change delay
 * Usage example:
   @include createBarspinnerAnimation(5, 1.2s, 0,1);
 */
/*
 * Tooltip colors
 * @param $color - color property
 * Usage example:
   @include tooltipColor(var(--brand-primary));
 */
/*
 * Convert Tooltip colors
 * @param $color - css color property
 * Usage example:
   @include convertTooltipColor(var(--status-default));
 */
/*
    Constants
*/
/*
    Variables
*/
/*
    List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS.
    See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references.
    Variables name example: --title-center-semibold-red
 */
/*
    to use styles without modifier class on .inline-icon
    use @extend

    e.g. style icon on parent hover:
        a:hover .inline-icon {
            @extend %inline-icon-active;
        }
*/
/**
 * Define Breakpoints here.
 */
/** Need to add new breakpoints for mixins */
:root {
  --temp-static-spacing-5: 5px;
  --temp-static-spacing-7: 7px;
  --temp-static-spacing-9: 9px;
  --temp-static-spacing-13: 13px;
  --temp-static-spacing-15: 15px;
  --temp-static-spacing-104: 104px;
  --temp-static-spacing-128: 128px;
  --temp-static-spacing-144: 144px;
  --temp-static-spacing-202: 202px;
  --temp-static-spacing-288: 288px;
  --temp-static-spacing-289: 289px;
  --temp-static-spacing-312: 312px;
  --temp-static-spacing-360: 360px;
}

.quill-input__container {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--component-field-spacing-gap-xs);
}

.quill-input__container input[type=number]::-webkit-outer-spin-button, .quill-input__container input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quill-input__container input[type=number] {
  -moz-appearance: textfield;
  -ms-appearance: textfield;
}

.quill-input__container .message__container {
  display: flex;
  gap: var(--component-field-spacing-gap-sm);
  justify-content: space-between;
}

.quill-input__container .message__container--lg, .quill-input__container .message__container--md {
  padding-left: var(--component-field-spacing-padding-md);
  padding-right: var(--component-field-spacing-padding-md);
}

.quill-input__container .message__container--sm {
  padding-left: var(--component-field-spacing-padding-sm);
  padding-right: var(--component-field-spacing-padding-sm);
}

.quill-input__container .message__container__password_validation {
  display: flex;
  flex-direction: column;
  gap: var(--semantic-spacing-gap-md);
}

.quill-input__container .message__container__status--neutral {
  color: var(--component-textIcon-normal-subtle);
}

.quill-input__container .message__container__status--success {
  color: var(--component-textIcon-statusNormal-success);
}

.quill-input__container .message__container__status--error {
  color: var(--component-textIcon-statusNormal-danger);
}

.quill-input__container .message__container__disabled {
  color: var(--component-textIcon-normal-subtle);
}

.quill-input__container .message__container__text {
  font-size: var(--semantic-typography-caption-regular-default-fontSize);
  line-height: var(--semantic-typography-caption-regular-default-lineHeight);
  font-weight: var(--semantic-typography-caption-regular-default-fontWeight);
  font-family: var(--semantic-typography-caption-regular-default-fontFamily);
}

.quill-input__container .icon_wrapper {
  background-color: transparent;
  border: none;
  padding: var(--core-spacing-50);
  display: flex;
  margin: auto;
}

.quill-input-icons__wrapper {
  display: flex;
  width: 100%;
  gap: var(--component-field-spacing-gap-sm);
}

.quill-input__rotate {
  transition-property: transform;
  transition-timing-function: var(--core-motion-ease-400);
  transition-duration: var(--core-motion-duration-200);
  transform: rotate(0);
}

.quill-input__rotate[data-state=open] {
  transform: rotate(180deg);
}

.quill-input__icon {
  margin: auto;
  fill: var(--component-textIcon-normal-prominent);
}

.quill-input-label__wrapper {
  display: flex;
  position: relative;
  flex-grow: 1;
}

.quill-input-label__wrapper[\:has\(input\[type\%3Dselect\]\)] {
  z-index: -1;
}

.quill-input-label__wrapper:has(input[type=select]) {
  z-index: -1;
}

.quill-input-label__wrapper[focus-within][\:has\(label\)] {
  padding-top: var(--core-spacing-600);
}

.quill-input-label__wrapper[focus-within]:has(label) {
  padding-top: var(--core-spacing-600);
}

.quill-input-label__wrapper[focus-within][\:has\(label\)] {
  padding-top: var(--core-spacing-600);
}

.quill-input-label__wrapper:focus-within[\:has\(label\)] {
  padding-top: var(--core-spacing-600);
}

.quill-input-label__wrapper:focus-within:has(label) {
  padding-top: var(--core-spacing-600);
}

.quill-input-label__wrapper[focus-within] > .label {
  top: var(--core-spacing-50);
}

.quill-input-label__wrapper:focus-within > .label {
  top: var(--core-spacing-50);
}

.quill-input-label__wrapper[focus-within] > .label__status--neutral {
  color: var(--component-field-label-color-focus);
}

.quill-input-label__wrapper:focus-within > .label__status--neutral {
  color: var(--component-field-label-color-focus);
}

.quill-input-label__wrapper--has-value[\:has\(label\)] {
  top: var(--core-spacing-50);
  padding-top: var(--core-spacing-600);
}

.quill-input-label__wrapper--has-value:has(label) {
  top: var(--core-spacing-50);
  padding-top: var(--core-spacing-600);
}

.quill-input-label__wrapper--has-value > .label {
  top: var(--core-spacing-50);
}

.quill-input-no-label__wrapper {
  display: flex;
  align-items: center;
  width: 100%;
}

.quill-input-label__label {
  margin: auto var(--core-spacing-200) auto;
}

.quill-input-label__label--right {
  margin-left: var(--core-spacing-200);
}

.quill-input__wrapper {
  width: 100%;
  align-items: center;
  font-family: var(--core-fontFamily-ibmPlex-sans);
  overflow: hidden;
  position: relative;
  display: flex;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.quill-input__wrapper[\:has\(input\:disabled\)] {
  cursor: not-allowed;
}

.quill-input__wrapper:has(input:disabled) {
  cursor: not-allowed;
}

.quill-input__wrapper[\:has\(input\:disabled\)] .label {
  color: var(--component-field-label-color-disabled);
}

.quill-input__wrapper:has(input:disabled) .label {
  color: var(--component-field-label-color-disabled);
}

.quill-input__wrapper[\:has\(input\:disabled\)] svg {
  fill: var(--component-field-label-color-disabled);
}

.quill-input__wrapper:has(input:disabled) svg {
  fill: var(--component-field-label-color-disabled);
}

.quill-input__wrapper:hover {
  transition-property: border;
  transition-timing-function: var(--core-motion-ease-400);
  transition-duration: var(--core-motion-duration-200);
}

.quill-input__wrapper__variant--outline {
  z-index: 1;
  background-color: var(--component-field-bg-outline-default);
  border: var(--component-field-border-width) solid var(--component-field-border-color-default);
}

.quill-input__wrapper__variant--outline[\:has\(input\:disabled\)] {
  border-color: var(--component-field-border-color-default);
}

.quill-input__wrapper__variant--outline:has(input:disabled) {
  border-color: var(--component-field-border-color-default);
}

.quill-input__wrapper__variant--outline--neutral:hover {
  border-color: var(--component-field-border-color-hover);
}

.quill-input__wrapper__variant--outline--neutral[focus-within], .quill-input__wrapper__variant--outline--neutral:focus {
  border-color: var(--component-field-border-color-focus);
}

.quill-input__wrapper__variant--outline--neutral:focus-within, .quill-input__wrapper__variant--outline--neutral:focus {
  border-color: var(--component-field-border-color-focus);
}

.quill-input__wrapper__variant--outline--success {
  border-color: var(--component-field-border-color-successDefault);
}

.quill-input__wrapper__variant--outline--success:hover {
  border-color: var(--component-field-border-color-successHover);
}

.quill-input__wrapper__variant--outline--success[focus-within], .quill-input__wrapper__variant--outline--success:focus {
  border-color: var(--component-field-border-color-successFocus);
}

.quill-input__wrapper__variant--outline--success:focus-within, .quill-input__wrapper__variant--outline--success:focus {
  border-color: var(--component-field-border-color-successFocus);
}

.quill-input__wrapper__variant--outline--error {
  border-color: var(--component-field-border-color-failDefault);
}

.quill-input__wrapper__variant--outline--error:hover {
  border-color: var(--component-field-border-color-failHover);
}

.quill-input__wrapper__variant--outline--error[focus-within], .quill-input__wrapper__variant--outline--error:focus {
  border-color: var(--component-field-border-color-failFocus);
}

.quill-input__wrapper__variant--outline--error:focus-within, .quill-input__wrapper__variant--outline--error:focus {
  border-color: var(--component-field-border-color-failFocus);
}

.quill-input__wrapper__variant--fill {
  border-right: var(--component-field-border-width) solid transparent;
  border-left: var(--component-field-border-width) solid transparent;
}

.quill-input__wrapper__variant--fill[\:has\(input\:disabled\)] {
  background-color: var(--component-field-bg-fill-default);
}

.quill-input__wrapper__variant--fill:has(input:disabled) {
  background-color: var(--component-field-bg-fill-default);
}

.quill-input__wrapper__variant--fill--neutral {
  background-color: var(--component-field-bg-fill-default);
}

.quill-input__wrapper__variant--fill--neutral:hover {
  background-color: var(--component-field-bg-fill-hover);
}

.quill-input__wrapper__variant--fill--neutral[focus-within], .quill-input__wrapper__variant--fill--neutral:focus {
  border: var(--component-field-border-width) solid var(--component-field-border-color-focus);
  background-color: var(--component-field-bg-fill-focus);
}

.quill-input__wrapper__variant--fill--neutral:focus-within, .quill-input__wrapper__variant--fill--neutral:focus {
  border: var(--component-field-border-width) solid var(--component-field-border-color-focus);
  background-color: var(--component-field-bg-fill-focus);
}

.quill-input__wrapper__variant--fill--success {
  background-color: var(--component-field-bg-fill-successDefault);
}

.quill-input__wrapper__variant--fill--success:hover {
  background-color: var(--component-field-bg-fill-successHover);
}

.quill-input__wrapper__variant--fill--success[focus-within], .quill-input__wrapper__variant--fill--success:focus {
  border: var(--component-field-border-width) solid var(--component-field-border-color-successFocus);
  background-color: var(--component-field-bg-fill-successFocus);
}

.quill-input__wrapper__variant--fill--success:focus-within, .quill-input__wrapper__variant--fill--success:focus {
  border: var(--component-field-border-width) solid var(--component-field-border-color-successFocus);
  background-color: var(--component-field-bg-fill-successFocus);
}

.quill-input__wrapper__variant--fill--error {
  background-color: var(--component-field-bg-fill-failDefault);
}

.quill-input__wrapper__variant--fill--error:hover {
  background-color: var(--component-field-bg-fill-failHover);
}

.quill-input__wrapper__variant--fill--error[focus-within], .quill-input__wrapper__variant--fill--error:focus {
  border: var(--component-field-border-width) solid var(--component-field-border-color-failFocus);
  background-color: var(--component-field-bg-fill-failFocus);
}

.quill-input__wrapper__variant--fill--error:focus-within, .quill-input__wrapper__variant--fill--error:focus {
  border: var(--component-field-border-width) solid var(--component-field-border-color-failFocus);
  background-color: var(--component-field-bg-fill-failFocus);
}

.quill-input__wrapper__size--sm {
  padding-left: var(--component-field-spacing-padding-sm);
  padding-right: var(--component-field-spacing-padding-sm);
  height: var(--component-field-height-sm);
  border-radius: var(--component-field-border-radius-sm);
  gap: var(--component-field-spacing-gap-sm);
}

.quill-input__wrapper__size--md {
  padding-left: var(--component-field-spacing-padding-md);
  padding-right: var(--component-field-spacing-padding-md);
  height: var(--size-generic-lg);
  border-radius: var(--component-field-border-radius-md);
  gap: var(--core-spacing-800);
}

.quill-input__wrapper__size--lg {
  padding-left: var(--component-field-spacing-padding-md);
  padding-right: var(--component-field-spacing-padding-md);
  height: var(--component-field-height-md);
  border-radius: var(--component-field-border-radius-md);
  gap: var(--core-spacing-800);
}

.quill-input__wrapper .input {
  width: 100%;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.quill-input__wrapper .input:disabled {
  cursor: not-allowed;
}

.quill-input__wrapper .input:disabled + .label {
  cursor: not-allowed;
}

.quill-input__wrapper .input:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  color: var(--component-field-label-color-focus);
}

.quill-input__wrapper .input:hover {
  color: var(--component-field-label-color-default);
}

.quill-input__wrapper .input::-moz-placeholder {
  color: var(--component-field-placeholder-color);
}

.quill-input__wrapper .input::placeholder {
  color: var(--component-field-placeholder-color);
}

.quill-input__wrapper .input:not(placeholder-shown) {
  color: var(--component-field-label-color-default);
}

.quill-input__wrapper .input:disabled {
  color: var(--component-field-label-color-disabled);
}

.quill-input__wrapper .input[\:has\(~\%20label\)] {
  font-size: var(--core-fontSize-100);
}

.quill-input__wrapper .input:has(~ label) {
  font-size: var(--core-fontSize-100);
}

.quill-input__wrapper .input[\:has\(~\%20label\)]::-moz-placeholder {
  color: transparent;
}

.quill-input__wrapper .input[\:has\(~\%20label\)]::placeholder {
  color: transparent;
}

.quill-input__wrapper .input:has(~ label)::-moz-placeholder {
  color: transparent;
}

.quill-input__wrapper .input:has(~ label)::placeholder {
  color: transparent;
}

.quill-input__wrapper .input[\:has\(~\%20label\)]:focus::-moz-placeholder {
  color: var(--component-field-label-color-disabled);
}

.quill-input__wrapper .input[\:has\(~\%20label\)]:focus::placeholder {
  color: var(--component-field-label-color-disabled);
}

.quill-input__wrapper .input:has(~ label):focus::-moz-placeholder {
  color: var(--component-field-label-color-disabled);
}

.quill-input__wrapper .input:has(~ label):focus::placeholder {
  color: var(--component-field-label-color-disabled);
}

.quill-input__wrapper .input::-webkit-search-decoration, .quill-input__wrapper .input::-webkit-search-cancel-button, .quill-input__wrapper .input::-webkit-search-results-button, .quill-input__wrapper .input::-webkit-search-results-decoration, .quill-input__wrapper .input::-ms-clear, .quill-input__wrapper .input::-ms-reveal {
  display: none;
}

.quill-input__wrapper .input::-ms-clear, .quill-input__wrapper .input::-ms-reveal {
  width: 0;
  height: 0;
}

.quill-input__wrapper .input__align--left {
  text-align: left;
}

.quill-input__wrapper .input__align--center[\:not-has\(~\%20label\)] {
  text-align: center;
}

.quill-input__wrapper .input__align--center:not(:has(~ label)) {
  text-align: center;
}

.quill-input__wrapper .input__size--sm {
  font-size: var(--semantic-typography-body-sm-regular-default-fontSize);
  line-height: var(--semantic-typography-body-sm-regular-default-lineHeight);
}

.quill-input__wrapper .input__size--md, .quill-input__wrapper .input__size--lg {
  font-size: var(--semantic-typography-body-md-regular-default-fontSize);
  line-height: var(--semantic-typography-body-md-regular-default-lineHeight);
}

.quill-input__wrapper .label {
  position: absolute;
  transition-property: all;
  transition-timing-function: var(--core-motion-ease-400);
  transition-duration: var(--core-motion-duration-200);
  display: flex;
  align-items: center;
  width: 100%;
  cursor: pointer;
  left: var(--core-spacing-50);
  gap: var(--semantic-spacing-gap-sm);
}

.quill-input__wrapper .label__status--neutral {
  color: var(--component-field-label-color-default);
}

.quill-input__wrapper .label__status--success {
  color: var(--component-field-label-color-success);
}

.quill-input__wrapper .label__status--error {
  color: var(--component-field-label-color-fail);
}

.quill-input__wrapper .label-field-marker__required--true {
  color: var(--core-color-solid-red-900);
}

.quill-input__wrapper .label-field-marker__required--false {
  color: var(--component-textIcon-normal-disabled);
}

.quill-input__wrapper .peer:-moz-placeholder + .label {
  line-height: var(--core-lineHeight-300);
  font-size: var(--core-fontSize-100);
  height: 100%;
}

.quill-input__wrapper .peer:placeholder-shown + .label {
  line-height: var(--core-lineHeight-300);
  font-size: var(--core-fontSize-100);
  height: 100%;
}

.quill-input__wrapper .peer:focus + .label {
  line-height: var(--core-lineHeight-100);
  font-size: var(--core-fontSize-50);
  height: var(--core-size-600);
  gap: var(--semantic-spacing-gap-sm);
}

.quill-input__wrapper .peer:focus + .label-field-marker {
  font-size: var(--semantic-typography-caption-regular-default-fontSize);
}

.quill-input__wrapper .peer:not(placeholder-shown) + .label {
  line-height: var(--core-lineHeight-100);
  font-size: var(--core-fontSize-50);
  height: var(--core-size-600);
}

.quill-input__wrapper .peer:not(placeholder-shown) + .label-field-marker {
  font-size: var(--semantic-typography-body-md-regular-default-fontSize);
}

.quill-input__wrapper .status-icon--neutral {
  fill: var(--component-textIcon-normal-default);
}

.quill-input__wrapper .status-icon--success {
  fill: var(--component-textIcon-statusNormal-success);
}

.quill-input__wrapper .status-icon--error {
  fill: var(--component-textIcon-statusNormal-danger);
}
/*------------------------------------*
 *  # Base Constants
 *------------------------------------*/
/* LAYOUT CONSTANTS */
/*------------------------------------*
 *  # SASS Mixins and Functions
 *------------------------------------*/
/*
 * RTL Language Mixin
 */
/*
 * SASS interpolation
 */
/*
 * PX to EM
 * @param $px - px value to be converted
 * @param $base - base font size (in `em`)
 * Note: 'em' values are calculate based on the element font-size
 *       to properly converts 'px' to 'em', please pass in the element font-size with it
 * Usage example:
    padding: em(16px, 1.6em); // font-size in 'em'
 */
/*
 * Set property by passing a property name, and values.
 * @param $property name - padding, margin etc.
 * @param $values        - values in `px` (space separated for multiple values)
 * @param $font-size     - base font-size in `em`
 * Usage example:
   @include toEm(padding, 8px 16px 8px, 1.6em);
 */
/*
 * Generate typefaces key-value pair of variable name and config
 * Example:
   --paragraph-center-bold-black: (14px, center, bold, black)
 */
/*
 * Sets font-size, font-weight, color, text-transform, text-align and line-height
 * Usage example:
   @include setTypeface(16px, bold, black, uppercase);
 */
/*
 * Set typefaces by passing a typeface variable name
 * @param $var   - typeface variable
 * @param $tt    - text-transform property
 * @param $align - text-align property
 * Usage example:
   @include typeface(--paragraph-bold-black, uppercase, center);
 */
/*
 * Range Slider Thumb styling is set here
 */
/*
 * SVG icons colors
 */
/*
 * Bar Spinner Animation
 * @param $count    - number of bars
 * @param $duration - duration of animation
 * @param $phase    - each bar phase change delay
 * Usage example:
   @include createBarspinnerAnimation(5, 1.2s, 0,1);
 */
/*
 * Tooltip colors
 * @param $color - color property
 * Usage example:
   @include tooltipColor(var(--brand-primary));
 */
/*
 * Convert Tooltip colors
 * @param $color - css color property
 * Usage example:
   @include convertTooltipColor(var(--status-default));
 */
/*
    Constants
*/
/*
    Variables
*/
/*
    List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS.
    See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references.
    Variables name example: --title-center-semibold-red
 */
/*
    to use styles without modifier class on .inline-icon
    use @extend

    e.g. style icon on parent hover:
        a:hover .inline-icon {
            @extend %inline-icon-active;
        }
*/
/**
 * Define Breakpoints here.
 */
/** Need to add new breakpoints for mixins */
.action-sheet--content {
  padding: var(--component-actionSheet-spacing-padding-md);
  flex-grow: 1;
  overflow-y: auto;
}

@media (min-width: 1024px) {
  .action-sheet--content {
    padding: var(--component-actionSheet-spacing-padding-lg);
  }
}
/*------------------------------------*
 *  # Base Constants
 *------------------------------------*/
/* LAYOUT CONSTANTS */
/*------------------------------------*
 *  # SASS Mixins and Functions
 *------------------------------------*/
/*
 * RTL Language Mixin
 */
/*
 * SASS interpolation
 */
/*
 * PX to EM
 * @param $px - px value to be converted
 * @param $base - base font size (in `em`)
 * Note: 'em' values are calculate based on the element font-size
 *       to properly converts 'px' to 'em', please pass in the element font-size with it
 * Usage example:
    padding: em(16px, 1.6em); // font-size in 'em'
 */
/*
 * Set property by passing a property name, and values.
 * @param $property name - padding, margin etc.
 * @param $values        - values in `px` (space separated for multiple values)
 * @param $font-size     - base font-size in `em`
 * Usage example:
   @include toEm(padding, 8px 16px 8px, 1.6em);
 */
/*
 * Generate typefaces key-value pair of variable name and config
 * Example:
   --paragraph-center-bold-black: (14px, center, bold, black)
 */
/*
 * Sets font-size, font-weight, color, text-transform, text-align and line-height
 * Usage example:
   @include setTypeface(16px, bold, black, uppercase);
 */
/*
 * Set typefaces by passing a typeface variable name
 * @param $var   - typeface variable
 * @param $tt    - text-transform property
 * @param $align - text-align property
 * Usage example:
   @include typeface(--paragraph-bold-black, uppercase, center);
 */
/*
 * Range Slider Thumb styling is set here
 */
/*
 * SVG icons colors
 */
/*
 * Bar Spinner Animation
 * @param $count    - number of bars
 * @param $duration - duration of animation
 * @param $phase    - each bar phase change delay
 * Usage example:
   @include createBarspinnerAnimation(5, 1.2s, 0,1);
 */
/*
 * Tooltip colors
 * @param $color - color property
 * Usage example:
   @include tooltipColor(var(--brand-primary));
 */
/*
 * Convert Tooltip colors
 * @param $color - css color property
 * Usage example:
   @include convertTooltipColor(var(--status-default));
 */
/*
    Constants
*/
/*
    Variables
*/
/*
    List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS.
    See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references.
    Variables name example: --title-center-semibold-red
 */
/*
    to use styles without modifier class on .inline-icon
    use @extend

    e.g. style icon on parent hover:
        a:hover .inline-icon {
            @extend %inline-icon-active;
        }
*/
/**
 * Define Breakpoints here.
 */
/** Need to add new breakpoints for mixins */
.quill-action-sheet--handle-bar {
  z-index: 1;
  display: flex;
  touch-action: none;
  align-items: center;
  justify-content: center;
  padding-top: var(--component-actionSheet-spacing-padding-sm);
  padding-bottom: var(--component-actionSheet-spacing-padding-sm);
  cursor: pointer;
}

[dir="ltr"] .quill-action-sheet--handle-bar:before {
  left: 0;
}

[dir="rtl"] .quill-action-sheet--handle-bar:before {
  right: 0;
}

.quill-action-sheet--handle-bar:before {
  content: "";
  display: block;
  height: var(--core-size-1200);
  width: 100%;
  position: absolute;
  top: 0;
}

@media (min-width: 1024px) {
  .quill-action-sheet--handle-bar {
    display: none;
  }
}
.quill-action-sheet--handle-bar--line {
  height: var(--component-handle-height);
  width: var(--component-handle-width);
  border-radius: var(--component-handle-border-radius);
  background-color: var(--component-handle-bg);
}

.quill-action-sheet--handle-bar--absolute {
  position: absolute;
  width: 100%;
}

.quill-action-sheet--handle-bar--sticky {
  position: sticky;
}
/*------------------------------------*
 *  # Base Constants
 *------------------------------------*/
/* LAYOUT CONSTANTS */
/*------------------------------------*
 *  # SASS Mixins and Functions
 *------------------------------------*/
/*
 * RTL Language Mixin
 */
/*
 * SASS interpolation
 */
/*
 * PX to EM
 * @param $px - px value to be converted
 * @param $base - base font size (in `em`)
 * Note: 'em' values are calculate based on the element font-size
 *       to properly converts 'px' to 'em', please pass in the element font-size with it
 * Usage example:
    padding: em(16px, 1.6em); // font-size in 'em'
 */
/*
 * Set property by passing a property name, and values.
 * @param $property name - padding, margin etc.
 * @param $values        - values in `px` (space separated for multiple values)
 * @param $font-size     - base font-size in `em`
 * Usage example:
   @include toEm(padding, 8px 16px 8px, 1.6em);
 */
/*
 * Generate typefaces key-value pair of variable name and config
 * Example:
   --paragraph-center-bold-black: (14px, center, bold, black)
 */
/*
 * Sets font-size, font-weight, color, text-transform, text-align and line-height
 * Usage example:
   @include setTypeface(16px, bold, black, uppercase);
 */
/*
 * Set typefaces by passing a typeface variable name
 * @param $var   - typeface variable
 * @param $tt    - text-transform property
 * @param $align - text-align property
 * Usage example:
   @include typeface(--paragraph-bold-black, uppercase, center);
 */
/*
 * Range Slider Thumb styling is set here
 */
/*
 * SVG icons colors
 */
/*
 * Bar Spinner Animation
 * @param $count    - number of bars
 * @param $duration - duration of animation
 * @param $phase    - each bar phase change delay
 * Usage example:
   @include createBarspinnerAnimation(5, 1.2s, 0,1);
 */
/*
 * Tooltip colors
 * @param $color - color property
 * Usage example:
   @include tooltipColor(var(--brand-primary));
 */
/*
 * Convert Tooltip colors
 * @param $color - css color property
 * Usage example:
   @include convertTooltipColor(var(--status-default));
 */
/*
    Constants
*/
/*
    Variables
*/
/*
    List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS.
    See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references.
    Variables name example: --title-center-semibold-red
 */
/*
    to use styles without modifier class on .inline-icon
    use @extend

    e.g. style icon on parent hover:
        a:hover .inline-icon {
            @extend %inline-icon-active;
        }
*/
/**
 * Define Breakpoints here.
 */
/** Need to add new breakpoints for mixins */
.quill-action-sheet--portal {
  position: fixed;
  top: var(--semantic-spacing-general-none);
  right: var(--semantic-spacing-general-none);
  bottom: var(--semantic-spacing-general-none);
  left: var(--semantic-spacing-general-none);
  transition: all var(--core-motion-duration-200) var(--core-motion-ease-400);
}

.quill-action-sheet--portal--wrapper {
  pointer-events: none;
  z-index: 150;
  display: flex;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  align-items: flex-end;
  justify-content: center;
  overflow-x: hidden;
}

.quill-action-sheet--portal__variant--modal {
  position: fixed;
  z-index: 150;
  top: var(--semantic-spacing-general-none);
  right: var(--semantic-spacing-general-none);
  bottom: var(--semantic-spacing-general-none);
  left: var(--semantic-spacing-general-none);
  background-color: var(--core-color-opacity-black-600);
  pointer-events: auto;
}

.quill-action-sheet--root {
  pointer-events: auto;
  box-shadow: var(--core-elevation-shadow-540);
  touch-action: none;
  position: relative;
  z-index: 20;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  max-height: 90dvh;
  width: 100%;
  max-width: 800px;
  flex-direction: column;
  overflow-y: auto;
  border-top-left-radius: var(--semantic-borderRadius-lg);
  border-top-right-radius: var(--semantic-borderRadius-lg);
  background-color: var(--component-actionSheet-bg);
  transition: all var(--motion-easing-inandout) var(--core-motion-duration-200);
}

@media (min-width: 1024px) {
  .quill-action-sheet--root {
    max-width: 360px;
    border-radius: var(--semantic-spacing-general-none);
    max-height: 100vh;
  }
}
.quill-action-sheet--root--enter, .quill-action-sheet--root--exit {
  transform: translateY(100%);
}

@media (min-width: 1024px) {
  .quill-action-sheet--root--enter.position--right {
    transform: translate(100%);
  }
  .quill-action-sheet--root--exit.position--right {
    transform: translate(100%);
  }
}
@media (min-width: 1024px) {
  .quill-action-sheet--root--enter.position--left {
    transform: translate(-100%);
  }
  .quill-action-sheet--root--exit.position--left {
    transform: translate(-100%);
  }
}
.quill-action-sheet--root--enter-done {
  transform: translate(0);
  transition: all var(--motion-easing-inandout) var(--core-motion-duration-200);
}

@media (min-width: 1024px) {
  .quill-action-sheet--root__position--left {
    margin-left: var(--semantic-spacing-general-none);
  }
}
@media (min-width: 1024px) {
  .quill-action-sheet--root__position--right {
    margin-right: var(--semantic-spacing-general-none);
  }
}
/*------------------------------------*
 *  # Base Constants
 *------------------------------------*/
/* LAYOUT CONSTANTS */
/*------------------------------------*
 *  # SASS Mixins and Functions
 *------------------------------------*/
/*
 * RTL Language Mixin
 */
/*
 * SASS interpolation
 */
/*
 * PX to EM
 * @param $px - px value to be converted
 * @param $base - base font size (in `em`)
 * Note: 'em' values are calculate based on the element font-size
 *       to properly converts 'px' to 'em', please pass in the element font-size with it
 * Usage example:
    padding: em(16px, 1.6em); // font-size in 'em'
 */
/*
 * Set property by passing a property name, and values.
 * @param $property name - padding, margin etc.
 * @param $values        - values in `px` (space separated for multiple values)
 * @param $font-size     - base font-size in `em`
 * Usage example:
   @include toEm(padding, 8px 16px 8px, 1.6em);
 */
/*
 * Generate typefaces key-value pair of variable name and config
 * Example:
   --paragraph-center-bold-black: (14px, center, bold, black)
 */
/*
 * Sets font-size, font-weight, color, text-transform, text-align and line-height
 * Usage example:
   @include setTypeface(16px, bold, black, uppercase);
 */
/*
 * Set typefaces by passing a typeface variable name
 * @param $var   - typeface variable
 * @param $tt    - text-transform property
 * @param $align - text-align property
 * Usage example:
   @include typeface(--paragraph-bold-black, uppercase, center);
 */
/*
 * Range Slider Thumb styling is set here
 */
/*
 * SVG icons colors
 */
/*
 * Bar Spinner Animation
 * @param $count    - number of bars
 * @param $duration - duration of animation
 * @param $phase    - each bar phase change delay
 * Usage example:
   @include createBarspinnerAnimation(5, 1.2s, 0,1);
 */
/*
 * Tooltip colors
 * @param $color - color property
 * Usage example:
   @include tooltipColor(var(--brand-primary));
 */
/*
 * Convert Tooltip colors
 * @param $color - css color property
 * Usage example:
   @include convertTooltipColor(var(--status-default));
 */
/*
    Constants
*/
/*
    Variables
*/
/*
    List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS.
    See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references.
    Variables name example: --title-center-semibold-red
 */
/*
    to use styles without modifier class on .inline-icon
    use @extend

    e.g. style icon on parent hover:
        a:hover .inline-icon {
            @extend %inline-icon-active;
        }
*/
/**
 * Define Breakpoints here.
 */
/** Need to add new breakpoints for mixins */
.quill-dropdown-item {
  display: flex;
  align-items: center;
  width: 100%;
  cursor: pointer;
  border-radius: var(--component-dropdownItem-border-radius);
  background-color: transparent;
  border: none;
  position: relative;
}

.quill-dropdown-item__icon {
  width: var(--core-size-1200);
  height: var(--core-size-1200);
  display: flex;
  justify-content: center;
  align-items: center;
}

.quill-dropdown-item-label {
  flex-grow: 1;
}

.quill-dropdown-item__align-left {
  text-align: left;
}

.quill-dropdown-item__align-center {
  text-align: center;
}

.quill-dropdown-item__size--sm {
  min-height: var(--component-dropdownItem-height-item-sm);
  padding-left: var(--component-dropdownItem-spacing-padding-sm);
  padding-right: var(--component-dropdownItem-spacing-padding-sm);
  gap: var(--component-dropdownItem-spacing-gap-sm);
}

.quill-dropdown-item__size--md, .quill-dropdown-item__size--lg {
  min-height: var(--component-dropdownItem-height-item-md);
  padding-left: var(--component-dropdownItem-spacing-padding-md);
  padding-right: var(--component-dropdownItem-spacing-padding-md);
  gap: var(--component-dropdownItem-spacing-gap-md);
}

.quill-dropdown-item__selected--true__disabled--true {
  background-color: var(--component-dropdownItem-bg-selectedDisabled);
}

.quill-dropdown-item__selected--true__disabled--true > p {
  color: var(--component-dropdownItem-label-color-disabledWhite);
}

.quill-dropdown-item__selected--true__disabled--true > svg {
  fill: var(--component-dropdownItem-icon-disabledWhite);
}

.quill-dropdown-item__selected--true__disabled--false {
  background-color: var(--component-dropdownItem-bg-selected);
}

.quill-dropdown-item__selected--true__disabled--false > p {
  color: var(--component-dropdownItem-label-color-selectedWhite);
}

.quill-dropdown-item__selected--true__disabled--false > svg {
  fill: var(--component-dropdownItem-label-color-selectedWhite);
}

.quill-dropdown-item__selected--true__disabled--false:hover {
  background-color: var(--component-dropdownItem-bg-selectedHover);
}

.quill-dropdown-item__selected--true__disabled--false:active {
  background-color: var(--component-dropdownItem-bg-selectedActive);
}

.quill-dropdown-item__selected--false__disabled--true > svg {
  fill: var(--component-dropdownItem-icon-disabled);
}

.quill-dropdown-item__selected--false__disabled--false:hover {
  background-color: var(--component-dropdownItem-bg-hover);
}

.quill-dropdown-item__selected--false__disabled--false:active {
  background-color: var(--component-dropdownItem-bg-active);
}

.quill-dropdown-item-checkbox__selected--true__disabled--true > p {
  color: var(--component-dropdownItem-label-color-disabled);
}

.quill-dropdown-item-checkbox__selected--true__disabled--true > svg {
  fill: var(--component-selectionControl-icon-disabled);
}

.quill-dropdown-item-checkbox__selected--true__disabled--false > p {
  color: var(--component-dropdownItem-label-color-selected);
}

.quill-dropdown-item-checkbox__selected--true__disabled--false > svg {
  fill: var(--component-selectionControl-icon-selectedDefault);
}

.quill-dropdown-item-checkbox__selected--true__disabled--false:hover {
  background-color: var(--component-dropdownItem-bg-hover);
}

.quill-dropdown-item-checkbox__selected--true__disabled--false:active {
  background-color: var(--component-dropdownItem-bg-active);
}

.quill-dropdown-item-checkbox__selected--false__disabled--true > svg {
  fill: var(--component-selectionControl-icon-disabled);
}

.quill-dropdown-item-checkbox__selected--false__disabled--false > p {
  color: var(--component-dropdownItem-label-color-default);
}

.quill-dropdown-item-checkbox__selected--false__disabled--false > svg {
  fill: var(--component-selectionControl-icon-default);
}

.quill-dropdown-item-checkbox__selected--false__disabled--false:hover {
  background-color: var(--component-dropdownItem-bg-hover);
}

.quill-dropdown-item-checkbox__selected--false__disabled--false:active {
  background-color: var(--component-dropdownItem-bg-active);
}
/*------------------------------------*
 *  # Base Constants
 *------------------------------------*/
/* LAYOUT CONSTANTS */
/*------------------------------------*
 *  # SASS Mixins and Functions
 *------------------------------------*/
/*
 * RTL Language Mixin
 */
/*
 * SASS interpolation
 */
/*
 * PX to EM
 * @param $px - px value to be converted
 * @param $base - base font size (in `em`)
 * Note: 'em' values are calculate based on the element font-size
 *       to properly converts 'px' to 'em', please pass in the element font-size with it
 * Usage example:
    padding: em(16px, 1.6em); // font-size in 'em'
 */
/*
 * Set property by passing a property name, and values.
 * @param $property name - padding, margin etc.
 * @param $values        - values in `px` (space separated for multiple values)
 * @param $font-size     - base font-size in `em`
 * Usage example:
   @include toEm(padding, 8px 16px 8px, 1.6em);
 */
/*
 * Generate typefaces key-value pair of variable name and config
 * Example:
   --paragraph-center-bold-black: (14px, center, bold, black)
 */
/*
 * Sets font-size, font-weight, color, text-transform, text-align and line-height
 * Usage example:
   @include setTypeface(16px, bold, black, uppercase);
 */
/*
 * Set typefaces by passing a typeface variable name
 * @param $var   - typeface variable
 * @param $tt    - text-transform property
 * @param $align - text-align property
 * Usage example:
   @include typeface(--paragraph-bold-black, uppercase, center);
 */
/*
 * Range Slider Thumb styling is set here
 */
/*
 * SVG icons colors
 */
/*
 * Bar Spinner Animation
 * @param $count    - number of bars
 * @param $duration - duration of animation
 * @param $phase    - each bar phase change delay
 * Usage example:
   @include createBarspinnerAnimation(5, 1.2s, 0,1);
 */
/*
 * Tooltip colors
 * @param $color - color property
 * Usage example:
   @include tooltipColor(var(--brand-primary));
 */
/*
 * Convert Tooltip colors
 * @param $color - css color property
 * Usage example:
   @include convertTooltipColor(var(--status-default));
 */
/*
    Constants
*/
/*
    Variables
*/
/*
    List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS.
    See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references.
    Variables name example: --title-center-semibold-red
 */
/*
    to use styles without modifier class on .inline-icon
    use @extend

    e.g. style icon on parent hover:
        a:hover .inline-icon {
            @extend %inline-icon-active;
        }
*/
/**
 * Define Breakpoints here.
 */
/** Need to add new breakpoints for mixins */
.quill-breadcrumb--container {
  display: flex;
  overflow: visible;
  gap: var(--component-breadcrumb-spacing-gap-sm);
  align-items: center;
}

@media (min-width: 768px) {
  .quill-breadcrumb--container {
    gap: var(--component-breadcrumb-spacing-gap-md);
  }
}
.quill-breadcrumb--dropdown {
  position: relative;
  right: -18px;
  margin-left: -18px;
  width: 14px;
  opacity: 0;
}

.quill-breadcrumb--item {
  display: flex;
  align-items: center;
  white-space: nowrap;
  text-decoration: none;
  color: var(--component-textIcon-normal-prominent);
}

.quill-breadcrumb--item--disabled {
  pointer-events: none;
  opacity: var(--opacity-disabled);
}

.quill-breadcrumb--item:active {
  -webkit-text-decoration: var(--core-fontDecoration-underline);
          text-decoration: var(--core-fontDecoration-underline);
}

.quill-breadcrumb--chevron {
  display: none;
}
/*------------------------------------*
 *  # Base Constants
 *------------------------------------*/
/* LAYOUT CONSTANTS */
/*------------------------------------*
 *  # SASS Mixins and Functions
 *------------------------------------*/
/*
 * RTL Language Mixin
 */
/*
 * SASS interpolation
 */
/*
 * PX to EM
 * @param $px - px value to be converted
 * @param $base - base font size (in `em`)
 * Note: 'em' values are calculate based on the element font-size
 *       to properly converts 'px' to 'em', please pass in the element font-size with it
 * Usage example:
    padding: em(16px, 1.6em); // font-size in 'em'
 */
/*
 * Set property by passing a property name, and values.
 * @param $property name - padding, margin etc.
 * @param $values        - values in `px` (space separated for multiple values)
 * @param $font-size     - base font-size in `em`
 * Usage example:
   @include toEm(padding, 8px 16px 8px, 1.6em);
 */
/*
 * Generate typefaces key-value pair of variable name and config
 * Example:
   --paragraph-center-bold-black: (14px, center, bold, black)
 */
/*
 * Sets font-size, font-weight, color, text-transform, text-align and line-height
 * Usage example:
   @include setTypeface(16px, bold, black, uppercase);
 */
/*
 * Set typefaces by passing a typeface variable name
 * @param $var   - typeface variable
 * @param $tt    - text-transform property
 * @param $align - text-align property
 * Usage example:
   @include typeface(--paragraph-bold-black, uppercase, center);
 */
/*
 * Range Slider Thumb styling is set here
 */
/*
 * SVG icons colors
 */
/*
 * Bar Spinner Animation
 * @param $count    - number of bars
 * @param $duration - duration of animation
 * @param $phase    - each bar phase change delay
 * Usage example:
   @include createBarspinnerAnimation(5, 1.2s, 0,1);
 */
/*
 * Tooltip colors
 * @param $color - color property
 * Usage example:
   @include tooltipColor(var(--brand-primary));
 */
/*
 * Convert Tooltip colors
 * @param $color - css color property
 * Usage example:
   @include convertTooltipColor(var(--status-default));
 */
/*
    Constants
*/
/*
    Variables
*/
/*
    List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS.
    See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references.
    Variables name example: --title-center-semibold-red
 */
/*
    to use styles without modifier class on .inline-icon
    use @extend

    e.g. style icon on parent hover:
        a:hover .inline-icon {
            @extend %inline-icon-active;
        }
*/
/**
 * Define Breakpoints here.
 */
/** Need to add new breakpoints for mixins */
.quill__item-container {
  background-color: var(--component-dropdownList-bg);
  box-shadow: var(--component-dropdownList-elevation-shadow);
  border-radius: var(--component-dropdownList-border-radius);
  border-width: var(--component-dropdownList-border-width);
  border-color: var(--component-dropdownList-border-color);
  margin-top: var(--core-spacing-200);
  overflow-y: auto;
}

.quill__item-container--size-sm {
  padding: var(--component-dropdownList-spacing-padding-sm);
}

.quill__item-container--size-md {
  padding: var(--component-dropdownList-spacing-padding-md);
}

.quill__item-container--height-sm {
  max-height: var(--component-dropdownList-height-item-sm);
}

.quill__item-container--height-md {
  max-height: var(--component-dropdownList-height-item-md);
}

.quill__item-container--height-lg {
  max-height: var(--component-dropdownList-height-item-lg);
}
/*------------------------------------*
 *  # Base Constants
 *------------------------------------*/
/* LAYOUT CONSTANTS */
/*------------------------------------*
 *  # SASS Mixins and Functions
 *------------------------------------*/
/*
 * RTL Language Mixin
 */
/*
 * SASS interpolation
 */
/*
 * PX to EM
 * @param $px - px value to be converted
 * @param $base - base font size (in `em`)
 * Note: 'em' values are calculate based on the element font-size
 *       to properly converts 'px' to 'em', please pass in the element font-size with it
 * Usage example:
    padding: em(16px, 1.6em); // font-size in 'em'
 */
/*
 * Set property by passing a property name, and values.
 * @param $property name - padding, margin etc.
 * @param $values        - values in `px` (space separated for multiple values)
 * @param $font-size     - base font-size in `em`
 * Usage example:
   @include toEm(padding, 8px 16px 8px, 1.6em);
 */
/*
 * Generate typefaces key-value pair of variable name and config
 * Example:
   --paragraph-center-bold-black: (14px, center, bold, black)
 */
/*
 * Sets font-size, font-weight, color, text-transform, text-align and line-height
 * Usage example:
   @include setTypeface(16px, bold, black, uppercase);
 */
/*
 * Set typefaces by passing a typeface variable name
 * @param $var   - typeface variable
 * @param $tt    - text-transform property
 * @param $align - text-align property
 * Usage example:
   @include typeface(--paragraph-bold-black, uppercase, center);
 */
/*
 * Range Slider Thumb styling is set here
 */
/*
 * SVG icons colors
 */
/*
 * Bar Spinner Animation
 * @param $count    - number of bars
 * @param $duration - duration of animation
 * @param $phase    - each bar phase change delay
 * Usage example:
   @include createBarspinnerAnimation(5, 1.2s, 0,1);
 */
/*
 * Tooltip colors
 * @param $color - color property
 * Usage example:
   @include tooltipColor(var(--brand-primary));
 */
/*
 * Convert Tooltip colors
 * @param $color - css color property
 * Usage example:
   @include convertTooltipColor(var(--status-default));
 */
/*
    Constants
*/
/*
    Variables
*/
/*
    List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS.
    See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references.
    Variables name example: --title-center-semibold-red
 */
/*
    to use styles without modifier class on .inline-icon
    use @extend

    e.g. style icon on parent hover:
        a:hover .inline-icon {
            @extend %inline-icon-active;
        }
*/
/**
 * Define Breakpoints here.
 */
/** Need to add new breakpoints for mixins */
.quill-radio-button {
  display: flex;
  align-items: center;
}

.quill-radio-button__label {
  margin: 0 var(--core-spacing-300);
  cursor: pointer;
}

.quill-radio-button__label--disabled {
  color: var(--component-selectionControl-icon-disabled);
  cursor: default;
}

.quill-radio-button__icon {
  cursor: pointer;
}

.quill-radio-button__icon svg {
  display: flex;
  flex-direction: column;
}

.quill-radio-button__icon svg:focus {
  outline: none;
}

.quill-radio-button__icon svg.focus-visible {
  border: none;
  border-radius: 50%;
  box-shadow: 0 0 var(--core-borderWidth-75) var(--core-borderWidth-100) var(--core-color-solid-blue-700) inset;
}

.quill-radio-button__icon svg:focus-visible {
  border: none;
  border-radius: 50%;
  box-shadow: 0 0 var(--core-borderWidth-75) var(--core-borderWidth-100) var(--core-color-solid-blue-700) inset;
}

.quill-radio-button__icon--disabled {
  cursor: default;
}

.quill-radio-button__icon--right {
  order: 3;
}

.quill-radio-button__input {
  display: none;
}

.quill-radio-button__info {
  margin-left: var(--core-spacing-100);
}
/*------------------------------------*
 *  # Base Constants
 *------------------------------------*/
/* LAYOUT CONSTANTS */
/*------------------------------------*
 *  # SASS Mixins and Functions
 *------------------------------------*/
/*
 * RTL Language Mixin
 */
/*
 * SASS interpolation
 */
/*
 * PX to EM
 * @param $px - px value to be converted
 * @param $base - base font size (in `em`)
 * Note: 'em' values are calculate based on the element font-size
 *       to properly converts 'px' to 'em', please pass in the element font-size with it
 * Usage example:
    padding: em(16px, 1.6em); // font-size in 'em'
 */
/*
 * Set property by passing a property name, and values.
 * @param $property name - padding, margin etc.
 * @param $values        - values in `px` (space separated for multiple values)
 * @param $font-size     - base font-size in `em`
 * Usage example:
   @include toEm(padding, 8px 16px 8px, 1.6em);
 */
/*
 * Generate typefaces key-value pair of variable name and config
 * Example:
   --paragraph-center-bold-black: (14px, center, bold, black)
 */
/*
 * Sets font-size, font-weight, color, text-transform, text-align and line-height
 * Usage example:
   @include setTypeface(16px, bold, black, uppercase);
 */
/*
 * Set typefaces by passing a typeface variable name
 * @param $var   - typeface variable
 * @param $tt    - text-transform property
 * @param $align - text-align property
 * Usage example:
   @include typeface(--paragraph-bold-black, uppercase, center);
 */
/*
 * Range Slider Thumb styling is set here
 */
/*
 * SVG icons colors
 */
/*
 * Bar Spinner Animation
 * @param $count    - number of bars
 * @param $duration - duration of animation
 * @param $phase    - each bar phase change delay
 * Usage example:
   @include createBarspinnerAnimation(5, 1.2s, 0,1);
 */
/*
 * Tooltip colors
 * @param $color - color property
 * Usage example:
   @include tooltipColor(var(--brand-primary));
 */
/*
 * Convert Tooltip colors
 * @param $color - css color property
 * Usage example:
   @include convertTooltipColor(var(--status-default));
 */
/*
    Constants
*/
/*
    Variables
*/
/*
    List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS.
    See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references.
    Variables name example: --title-center-semibold-red
 */
/*
    to use styles without modifier class on .inline-icon
    use @extend

    e.g. style icon on parent hover:
        a:hover .inline-icon {
            @extend %inline-icon-active;
        }
*/
/**
 * Define Breakpoints here.
 */
/** Need to add new breakpoints for mixins */
:root {
  --temp-static-spacing-5: 5px;
  --temp-static-spacing-7: 7px;
  --temp-static-spacing-9: 9px;
  --temp-static-spacing-13: 13px;
  --temp-static-spacing-15: 15px;
  --temp-static-spacing-104: 104px;
  --temp-static-spacing-128: 128px;
  --temp-static-spacing-144: 144px;
  --temp-static-spacing-202: 202px;
  --temp-static-spacing-288: 288px;
  --temp-static-spacing-289: 289px;
  --temp-static-spacing-312: 312px;
  --temp-static-spacing-360: 360px;
}

.quill-dropdown-title__container {
  display: flex;
  align-items: center;
}

.quill-dropdown-title__container--md {
  padding-left: var(--component-dropdownItem-spacing-padding-md);
  padding-right: var(--component-dropdownItem-spacing-padding-md);
  gap: var(--component-dropdownItem-spacing-gap-md);
  height: var(--core-spacing-2000);
}

.quill-dropdown-title__container--sm {
  padding-left: var(--component-dropdownItem-spacing-padding-sm);
  padding-right: var(--component-dropdownItem-spacing-padding-sm);
  gap: var(--component-dropdownItem-spacing-gap-sm);
  height: var(--core-spacing-1200);
}

.quill-dropdown-title__label {
  flex-grow: 1;
}

.quill-dropdown-title__icon {
  height: var(--core-spacing-1200);
  width: var(--core-spacing-1200);
  display: flex;
  justify-content: center;
  align-items: center;
}