/*
 * Copyright (c) 2016-2025 Broadcom. All Rights Reserved.
 * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
 * This software is released under MIT license.
 * The full license information can be found in LICENSE in the root directory of this project.
 */
@use '../../utils/mixins';
@use '@cds/core/tokens/tokens.scss';

@use '../../utils/variables/variables.global';
@use '../../utils/variables/variables.density' as density;
@use 'variables.forms' as forms-variables;

// Flatten the error icon and message to be inline for certain input types
@mixin form-flatten-validate-text() {
  .clr-control-label {
    font-weight: normal;
    display: block;
  }
  & ~ .clr-validate-icon {
    margin-left: 0;
  }
  & ~ .clr-subtext {
    display: inline-block;
  }
}

// Used to provide an inline set of labels for checkbox/radios
@mixin form-inline-input($wrap: false) {
  display: flex;
  @if $wrap {
    flex-wrap: wrap;
    align-content: flex-start;
  }

  .clr-control-label {
    display: inline-block;
    margin-right: density.$clr-base-gap-m;
    width: auto;
  }
}

// Used to adjust the flattened error icon message for compact
@mixin form-flatten-compact-adjustments() {
  max-width: 100%;

  & ~ .clr-subtext {
    margin-left: density.$clr-base-horizontal-offset-xs;
  }
}

// Standard Clarity Input Bottom Border Animation
@mixin input-border-bottom-animation($border-color: forms-variables.$clr-forms-focused-color) {
  // Border-bottom animation on focus
  background: linear-gradient(to bottom, transparent 95%, #{$border-color} 95%) no-repeat;

  background-size: 0 100%;
  transition: background-size 0.2s ease;

  &:focus,
  &.clr-focus,
  &:focus-within {
    border-bottom-color: $border-color;
    background-size: 100% 100%;
  }
}

// Style default input
@mixin custom-inputs-reset($height) {
  @include mixins.clr-appearance-normal();
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: none;
  height: $height;

  &:focus {
    outline: 0;
  }
}

@mixin form-fields-appearance(
  $border-color: forms-variables.$clr-forms-border-color,
  $text-color: forms-variables.$clr-forms-text-color
) {
  color: $text-color;
  border-bottom: #{tokens.$cds-alias-object-border-width-100} solid #{$border-color};
  display: inline-flex;
  align-items: center;
}

@mixin disabled-form-fields() {
  color: forms-variables.$clr-forms-text-disabled-color;
  cursor: not-allowed;
}

@mixin checkbox-radio-toggle-control-group-gap() {
  & + .clr-checkbox-wrapper,
  & + .clr-radio-wrapper {
    padding-top: density.$clr-base-control-group-gap;
  }

  & + .clr-toggle-wrapper {
    margin-top: density.$clr-base-control-group-gap;
  }
}

@mixin checkbox-radio-input-styles($size) {
  position: relative;
  //NOTE: Even though the input is invisible, we assign it a height
  //and width so that it aligns right behind the fake checkbox
  //and so that the user's default input size doesn't affect it
  @include mixins.min-equilateral($size);
}

@mixin checkbox-radio-label-styles($min-height, $color, $typography) {
  //Positioning
  position: relative;

  //Display
  display: block;
  margin-top: 0;
  cursor: pointer;
  min-height: $min-height;
  padding: density.$clr-base-vertical-offset-multi-row-inline-s 0;
  color: $color;
  @include mixins.generate-typography-token($typography);
}

@mixin checkbox-radio-shared-inactive($size, $border-color) {
  //Display
  content: '';
  position: absolute;
  display: inline-block;
  @include mixins.equilateral($size);
  border: variables.$clr-global-borderwidth solid $border-color;
}

@mixin custom-inputs($height) {
  @include mixins.clr-appearance-normal();
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: none;
  height: $height;

  &:focus {
    outline: 0;
  }
}

@mixin range-style($height, $background-color) {
  -webkit-appearance: none;
  left: 0;
  height: $height;
  background-color: $background-color;
}

@mixin range-border-style($border-color, $border-radius, $border-width) {
  border: $border-width solid $border-color;
  border-radius: $border-radius;
}

@mixin range-track-style($height, $background-color-fallback) {
  height: $height;
  cursor: pointer;
  background-color: $background-color-fallback;
}

@mixin range-thumb-style($size, $background-color) {
  border-radius: 50%;
  background-color: $background-color;
  @include mixins.equilateral($size);
}