@use 'sass:map';
@use '../base/colors';
@use '../base/typography';

@mixin mx-input-theme($theme) {
  $is-dark: map.get($theme, is-dark);
  $current-theme: colors.$mx-light;

  @if $is-dark {
    $current-theme: colors.$mx-dark;
  }

  .mx-input-prefix {
    color: map.get($current-theme, onSurfaceVariant);
  }
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button,
input[type='number'] {
  -webkit-appearance: none;
}

.mx-input-prefix-wrapper {
  display: flex;
  align-items: center;

  .mx-input-prefix {
    @extend .gl-body-lg;
    margin-right: 2px;
  }
}