@use 'sass:map';
@use '../function' as *;
@use '../config' as *;
@use './variables' as *;
@use './breakpoint' as *;

/// Generate a from focus ring.
/// @param {string} $type - The type of focus ring (box-shadow, outline).
/// @param {string} $border-color - The border color.
/// @param {string} $ring-color - The ring color.
/// @param {string} $box-shadow-type - The box shadow type (outset, inset).
/// @param {string} $ring-size - The ring width.
/// @param {string} $ring-offset - The ring offset.
/// @return {string} - The generated focus ring.
@mixin focus-ring(
  $type: 'box-shadow',
  $border-color: null,
  $ring-color,
  $box-shadow-type: outset,
  $ring-size: 2px,
  $ring-offset: 2px
) {
  @if $type == 'box-shadow' {
    border-color: $border-color;
    @if $box-shadow-type == 'inset' {
      box-shadow: 0 0 0 $ring-size $ring-color inset;
    } @else {
      box-shadow: 0 0 0 $ring-size $ring-color;
    }
    outline: 2px solid transparent;
  }

  @if $type == 'outline' {
    outline: $ring-size solid $ring-color;
    outline-offset: $ring-offset;
  }
}

/// Style field disabled input states.
/// @param {string} $background - The background color.
/// @param {string} $border - The border color.
/// @return {string} - The generated disabled input states.
@mixin field-disabled(
  $background,
  $border
) {
  background-color: $background;
  border-color: $border;
  cursor: not-allowed;
}

/// Get custom icon background for input and select fields.
/// @param {string} $icon - The icon (an SVG in string).
/// @param {string} $color - The color.
/// @return {string} - The generated icon background.
@mixin field-icon(
  $icon,
  $color
) {
  background-image: url('#{svg-escape(str-replace($icon, "#COLOR#", $color))}');
}

/// Create a form group stacked layout with custom breakpoint.
/// @param {string} $breakpoint - The breakpoint.
/// @return {string} - The generated form group stacked layout.
@mixin form-group-stacked(
  $breakpoint: 'sm',
) {
  @if not map.has-key($breakpoints, $breakpoint) {
    @error 'The #{$breakpoint} not exists in the breakpoints map.';
  }

  @include generate-variables($form-control, $include: ('border-radius'));
  display: flex;
  flex-direction: column;

  @include breakpoint($breakpoint) { flex-direction: row; }

  > * {
    + * {
      border-start-end-radius: 0;
      border-start-start-radius: 0;
      margin-block-start: -1px;

      @include breakpoint($breakpoint) {
        border-end-start-radius: 0;
        border-start-end-radius: config('border-radius', $form-control);
        margin-block-start: 0;
        margin-inline-start: -1px;
      }
    }

    &:not(:last-child) {
      border-end-end-radius: 0;
      border-end-start-radius: 0;

      @include breakpoint($breakpoint) {
        border-end-end-radius: 0;
        border-start-end-radius: 0;
      }
    }

    @include breakpoint($breakpoint) {
      &:first-child {
        border-end-start-radius: config('border-radius', $form-control);
      }
    }

    &:focus {
      z-index: 2;
    }
  }
}