@use 'sass:map';
@use 'config/colors';
@use 'functions/color';
@use 'mixins/position';
@use 'mixins/spacing';
@use 'mixins/transition';

$container: (
  padding-x: 7px,
  padding-y: 3px,

  color: (
    hover: (
      light: color.alpha(color.shade(colors.$blue, 15%), 0.75),
      dark: color.alpha(colors.$blue, 0.75),
    ),
  ),

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

  background-color: (
    default: (
      light: color.alpha(colors.$white, 0.3),
      dark: color.alpha(colors.$white, 0.05),
    ),

    hover: (
      light: color.alpha(color.shade(colors.$blue, 15%), 0.05),
      dark: color.alpha(colors.$blue, 0.05),
    ),

    active: (
      light: color.alpha(colors.$white, 0.9),
      dark: color.alpha(colors.$white, 0.1),
    ),
  ),

  box-shadow: (
    default: (
      light: (
        0 0 1px color.alpha(colors.$black, 0.3),
        0 0 2px color.alpha(colors.$gray-darker, 0.15),
      ),

      dark: (
        0 0 1px color.alpha(colors.$white, 0.5),
        0 0 2px color.alpha(colors.$black, 0.3),
      ),
    ),

    hover: (
      light: (
        0 0 1px color.alpha(color.shade(colors.$blue, 15%), 0.85),
        0 0 2px color.alpha(colors.$blue, 0.3),
      ),

      dark: (
        0 0 1px color.alpha(colors.$blue, 0.85),
        0 0 2px color.alpha(colors.$blue, 0.3),
      ),
    ),
  ),

  border-radius: 15px,
  opacity-disabled: 0.3,
);

@mixin field-background($target: 'container') {
  border-radius: map.get($container, border-radius);

  @if $target == 'container' {
    &.light {
      background-color: map.get($container, background-color, default, light);
      box-shadow: map.get($container, box-shadow, default, light);
    }

    &.dark {
      background-color: map.get($container, background-color, default, dark);
      box-shadow: map.get($container, box-shadow, default, dark);
    }

    &:not(.active):hover {
      &.light {
        background-color: map.get($container, background-color, hover, light);
        box-shadow: map.get($container, box-shadow, hover, light);
      }

      &.dark {
        background-color: map.get($container, background-color, hover, dark);
        box-shadow: map.get($container, box-shadow, hover, dark);
      }
    }

    &.active {
      &.light {
        background-color: map.get($container, background-color, active, light);
      }

      &.dark {
        background-color: map.get($container, background-color, active, dark);
      }
    }
  } @else {
    .light & {
      background-color: map.get($container, background-color, default, light);
      box-shadow: map.get($container, box-shadow, default, light);
    }

    .dark & {
      background-color: map.get($container, background-color, default, dark);
      box-shadow: map.get($container, box-shadow, default, light);
    }

    .container:not(.active):hover & {
      .light & {
        background-color: map.get($container, background-color, hover, light);
        box-shadow: map.get($container, box-shadow, hover, light);
      }

      .dark & {
        background-color: map.get($container, background-color, hover, dark);
        box-shadow: map.get($container, box-shadow, hover, dark);
      }
    }

    .active & {
      box-shadow: none;

      .light & {
        background-color: map.get($container, background-color, active, light);
      }

      .dark & {
        background-color: map.get($container, background-color, active, dark);
      }
    }
  }
}

.container {
  position: relative;
  @include spacing.padding-xy($x: map.get($container, padding-x), $y: map.get($container, padding-y));
  color: inherit;
  @include field-background;
  @include transition.apply(color, background-color, box-shadow, opacity);

  &:not(.active):hover {
    &.light {
      color: map.get($container, color, hover, light);
    }

    &.dark {
      color: map.get($container, color, hover, dark);
    }
  }

  &.disabled {
    opacity: map.get($container, opacity-disabled);
    pointer-events: none;
  }
}

.absoluteHover {
  @include spacing.padding-none;
  background: none;
  border-radius: 0;
  @include transition.apply(color, opacity);

  &:hover {
    background: none;
    box-shadow: none;
  }

  &.active {
    background: none;
  }

  &::before {
    content: '';
    @include position.absolute-xy($x: -(map.get($container, padding-x)), $y: -(map.get($container, padding-y)));
    @include field-background($target: 'before');
    @include transition.apply(background-color, box-shadow);
  }
}

.input {
  width: 100%;
  color: inherit;

  &::placeholder {
    .light & {
      color: map.get($container, placeholder-color, default, light);
    }

    .dark & {
      color: map.get($container, placeholder-color, default, dark);
    }
  }
}
