@mixin input-readonly() { ... }@mixin input-readonly() { 
  input[readonly] {
    background-color: transparent;
  }
 }

@mixin input-field-icon() { ... }@mixin input-field-icon() { 
  pointer-events: initial;
 }

@mixin input-adornment-new() { ... }@mixin input-adornment-new() { 
  margin: 0;
 }

@mixin button-new() { ... }@mixin button-new() { 
  margin: 0;
 }

@mixin input-adornment() { ... }@mixin input-adornment() { 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-left: calc(#{spacing.get('s1')} * -1);
 }

@mixin button() { ... }@mixin button() { 
  @include kib-button-new.generate-styles('utility', 'secondary', 'medium', true);
 }

@mixin button-action-expanded() { ... }@mixin button-action-expanded() { 
  --kib-button-background: #{settings.$picker-open-action-icon-bg-color};
 }

@mixin button-action-disabled() { ... }@mixin button-action-disabled() { 
  pointer-events: none;
 }

@mixin input-adornment-icon() { ... }@mixin input-adornment-icon() { 
  color: settings.$adornment-icon-color;

  @media (forced-colors: active) {
    color: inherit;
  }
 }

@mixin input-adornment-icon-expanded() { ... }@mixin input-adornment-icon-expanded() { 
  --kib-button-text-color: #{settings.$picker-open-action-icon-focus-color};

  color: var(--kib-button-text-color);
 }

@mixin input-adornment-icon-disabled() { ... }@mixin input-adornment-icon-disabled() { 
  opacity: settings.$adornment-icon-disabled-opacity;

  @media (forced-colors: active) {
    opacity: 1;
  }
 }

@mixin input-hidden-text() { ... }@mixin input-hidden-text() { 
  @include kib-core.visually-hidden;
 }

@mixin icon() { ... }@mixin icon() { 
  width: settings.$icon-size;
  height: settings.$icon-size;
  color: settings.$icon-color;

  @media (forced-colors: active) {
    color: inherit;
  }
 }

@mixin icon-disabled() { ... }@mixin icon-disabled() { 
  opacity: settings.$icon-disabled-opacity;
 }

@mixin button-focus() { ... }@mixin button-focus() { 
  background-color: settings.$button-focus-bg-color;
 }

@mixin button-action-focus() { ... }@mixin button-action-focus() { 
  background-color: settings.$button-focus-bg-color;
 }

@mixin wrapper() { ... }@mixin wrapper() { 
  @include elevation.elevation('high');

  border-radius: settings.$wrapper-radius;

  @media (forced-colors: active) {
    border: unit.rem(2px) solid !important;
  }
 }

@mixin picker-calendar-container() { ... }@mixin picker-calendar-container() { 
  box-shadow: 0 -1px 0 0 color.get('ui-bg', '04');
 }

@mixin picker-controls-bar() { ... }@mixin picker-controls-bar() { 
  margin-top: spacing.get('s3');
  margin-bottom: spacing.get('s3');
 }

@mixin picker-month-name() { ... }@mixin picker-month-name() { 
  @include typography.style-as('paragraph-2');

  color: settings.$picker-month-name-color;
 }

@mixin picker-selected-month-year() { ... }@mixin picker-selected-month-year() { 
  @include typography.style-as('section-2');
 }

@mixin picker-choice() { ... }@mixin picker-choice() { 
  @include typography.style-as('paragraph-1');
 }

@mixin picker-choice-default() { ... }@mixin picker-choice-default() { 
  color: settings.$picker-choice-text-color;
 }

@mixin picker-choice-hover() { ... }@mixin picker-choice-hover() { 
  background-color: settings.$picker-choice-hover-bg-color;
 }

@mixin picker-choice-focus() { ... }@mixin picker-choice-focus() { 
  box-shadow: inset 0 0 0 settings.$picker-choice-focus-outline-width
    settings.$picker-choice-focus-outline-color;

  &:not(:hover) {
    background-color: transparent;
  }
 }

@mixin picker-choice-selected() { ... }@mixin picker-choice-selected() { 
  background-color: settings.$picker-choice-selected-bg-color;

  @media (forced-colors: active) {
    background-color: Highlight !important;
    color: HighlightText !important;
    border-color: HighlightText !important;
    forced-color-adjust: none;

    &:focus {
      box-shadow: none;
    }
  }
 }

@mixin picker-choice-disabled() { ... }@mixin picker-choice-disabled() { 
  background-image: linear-gradient(
    45deg,
    transparent 49%,
    settings.$picker-choice-disabled-line-color 50%,
    transparent 51%
  );
  cursor: not-allowed;
  color: settings.$picker-choice-disabled-color;
  pointer-events: none;
 }

@mixin picker-choice-today() { ... }@mixin picker-choice-today() { 
  position: relative;
  border: 0;

  &::before {
    position: absolute;
    top: settings.$picker-choice-today-dot-size;
    left: 50%;
    display: block;
    margin-left: math.div(settings.$picker-choice-today-dot-size, -2);
    width: settings.$picker-choice-today-dot-size;
    height: settings.$picker-choice-today-dot-size;
    background-color: settings.$picker-choice-today-dot-color;
    border-radius: settings.$picker-choice-today-dot-size;
    content: '';
  }
 }

@mixin picker-toolbar() { ... }@mixin picker-toolbar() { 
  position: relative;
  background-color: color.get('ui-bg', '04');
 }

@mixin picker-toolbar-title() { ... }@mixin picker-toolbar-title() { 
  @include typography.style-as('caption');

  display: block;
  color: color.get('text', 'secondary');
  text-transform: initial;
 }

@mixin picker-toolbar-selected-date() { ... }@mixin picker-toolbar-selected-date() { 
  @include typography.style-as('section-1');

  margin-top: spacing.get('s2');
 }

@mixin picker-toolbar-switch-button() { ... }@mixin picker-toolbar-switch-button() { 
  @include kib-button-new.generate-styles('action', 'tertiary', 'medium', true);

  position: absolute;
  top: 50%;
  right: kib-core.dimensions-get('default');
  transform: translateY(-25%);
  color: settings.$icon-color;
 }

@mixin picker-dialog-content() { ... }@mixin picker-dialog-content() { 
  padding-bottom: spacing.get('s4');
 }

@mixin picker-dialog-content-input() { ... }@mixin picker-dialog-content-input() { 
  margin-bottom: spacing.get('s8');
 }

@mixin picker-dialog-action-button() { ... }@mixin picker-dialog-action-button() { 
  @include kib-button-new.generate-styles('action', 'tertiary', 'small');

  text-transform: capitalize;

  &:last-child {
    @include kib-button-new.root;
  }
 }

// deprecate when fields new is suppored
@mixin button-action { ... }// deprecate when fields new is suppored
@mixin button-action { box-shadow: none;
  padding: spacing.get('s3', 's3');
  border-radius: 0 unit.rem(8px) unit.rem(8px) 0;
  opacity: inherit;

  > svg {
    width: inherit;
    height: inherit;
  }

  &::after {
    border: none;
  } }

$icon-size: kib-core.dimensions-get('large') !default;

$icon-color: color.get('link', 'active', 'primary') !default;

$icon-disabled-opacity: kib-button-new.$disabled-opacity !default;

$adornment-icon-color: color.get('text', 'primary') !default;

$adornment-icon-disabled-opacity: $icon-disabled-opacity !default;

$button-focus-bg-color: color.get('action', 'utility', 'alternate', '03') !default;

$wrapper-radius: border.get('br02') !default;

$picker-month-name-color: color.get('text', 'primary') !default;

$picker-choice-text-color: color.get('link', 'active', 'primary') !default;

$picker-choice-hover-bg-color: color.get('action', 'cta', 'alternate', '03') !default;

$picker-choice-focus-outline-width: unit.rem(2px) !default;

$picker-choice-focus-outline-color: color.get('action', 'cta', 'primary', 'primary') !default;

$picker-choice-selected-bg-color: color.get('action', 'cta', 'alternate', '02') !default;

$picker-choice-disabled-color: color.get('link', 'active', 'secondary') !default;

$picker-choice-disabled-line-color: color.get('ui-bg', '05') !default;

$picker-choice-today-dot-color: color.get('link', 'active', 'primary') !default;

$picker-choice-today-dot-size: kib-core.dimensions-get('tiny') !default;

$picker-toolbar-border-color: color.get('ui-bg', '04') !default;

$picker-toolbar-border-width: unit.rem(1px) !default;

$picker-open-action-icon-focus-color: color.get('field', '04') !default;

$picker-open-action-icon-bg-color: color.get('field', '03') !default;