@use 'config/colors';
@use 'functions/color';
// @use 'mixins/flex';
@use 'mixins/position';
@use 'mixins/spacing';
@use 'mixins/transition';

$padding-x: 5px;
$padding-y: 1px;
$border-radius: 15px;

$background-color-light: colors.$transparent;
$background-color-dark: colors.$transparent;
$background-color-light-hover: color.alpha(colors.$black, 0.05);
$background-color-dark-hover: color.alpha(colors.$white, 0.05);
$background-color-light-active: color.alpha(colors.$black, 0.1);
$background-color-dark-active: color.alpha(colors.$white, 0.1);

$input-font-size: 10px;
$input-color: color.tint(colors.$blue, 15%);
$input-color-hover: colors.$blue;
$input-color-active: color.shade(colors.$blue, 15%);

$placeholder-light-color: color.alpha(colors.$black, 0.3);
$placeholder-dark-color: color.alpha(colors.$white, 0.3);

.container {
  position: relative;
  // @include flex.row-center;
  border-radius: $border-radius;

  &:not(.absoluteHover) {
    @include spacing.padding-xy($padding-x, $padding-y);
    @include transition.apply(background-color);

    &.light {
      background-color: $background-color-light;
    }

    &.dark {
      background-color: $background-color-dark;
    }

    &.light:hover {
      background-color: $background-color-light-hover;
    }

    &.dark:hover {
      background-color: $background-color-dark-hover;
    }

    &.light.active {
      background-color: $background-color-light-active;
    }

    &.dark.active {
      background-color: $background-color-dark-active;
    }
  }

  &.disabled {
    opacity: 0.3;
    user-select: none;
    pointer-events: none;
  }
}

.absoluteHover {
  &::before {
    content: '';
    @include position.absolute-xy(-$padding-x, -$padding-y);
    border-radius: $border-radius;
    @include transition.apply(background-color);
    user-select: none;
    pointer-events: none;
  }

  &.light::before {
    background-color: $background-color-light;
  }

  &.dark::before {
    background-color: $background-color-dark;
  }

  &.light:hover::before {
    background-color: $background-color-light-hover;
  }

  &.dark:hover::before {
    background-color: $background-color-dark-hover;
  }

  &.light.active::before {
    background-color: $background-color-light-active;
  }

  &.dark.active::before {
    background-color: $background-color-dark-active;
  }
}

.input {
  width: 100%;
  color: $input-color;
  text-align: center;
  @include transition.apply(color);

  .container:hover & {
    color: $input-color-hover;
  }

  .container.active & {
    color: $input-color-active;
  }

  &::placeholder {
    font-size: $input-font-size;
  }

  .light &::placeholder {
    color: $placeholder-light-color;
  }

  .dark &::placeholder {
    color: $placeholder-dark-color;
  }

  // hide the number stepper arrows
  -moz-appearance: textfield; // Firefox

  &::-webkit-inner-spin-button, &::-webkit-outer-spin-button { // Webkit
    @include spacing.margin-none;
    -webkit-appearance: none;
  }
}
