/*
 * 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 'mixins.forms' as forms-mixins;
@use '@cds/core/tokens/tokens.scss';
@use 'variables.forms' as forms-variables;
@use '../../utils/variables/variables.density' as density;

@include mixins.exports('forms.containers') {
  .clr-form-control {
    margin-top: density.$clr-base-vertical-offset-2xl;
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    input::-ms-reveal,
    input::-ms-clear {
      display: none;
    }
  }

  .clr-form-control-disabled {
    color: forms-variables.$clr-forms-text-disabled-color;

    label,
    .clr-control-label {
      color: forms-variables.$clr-forms-label-disabled-color;
    }

    .clr-input,
    .clr-textarea,
    .clr-select,
    .clr-number-input {
      color: forms-variables.$clr-forms-text-disabled-color;
      border-bottom-color: forms-variables.$clr-forms-border-disabled-color;
    }

    input[type='range']::-webkit-slider-thumb,
    input[type='range']::-moz-range-thumb {
      background-color: var(
        --clr-forms-range-progress-fill-color-disabled,
        forms-variables.$clr-forms-range-progress-fill-color-disabled
      );
    }

    .clr-subtext {
      color: forms-variables.$clr-forms-subtext-disabled-color;
    }
  }

  .clr-form-control-multi {
    flex-direction: row;
    flex-wrap: wrap;

    .clr-control-label {
      width: 100%;
    }
  }

  .clr-control-label {
    display: block;
    color: forms-variables.$clr-forms-label-color;
    padding-top: density.$clr-base-vertical-offset-xs;
    padding-bottom: density.$clr-base-vertical-offset-xs;

    @include mixins.generate-typography-token(
      'SECONDARY-13-SB-CPT',
      (
        font-weight: forms-variables.$clr-forms-label-font-weight,
      )
    );
  }

  .clr-control-container {
    @include mixins.generate-typography-token('SECONDARY-13-RG-EXP');
  }

  .clr-control-inline {
    @include forms-mixins.form-inline-input(true);

    .clr-checkbox-wrapper,
    .clr-radio-wrapper {
      padding-top: 0;
    }

    .clr-toggle-wrapper {
      margin-top: 0;
    }
  }

  .clr-subtext {
    display: block;
    @include mixins.generate-typography-token('CAPTION-LG-11-STD');
    color: forms-variables.$clr-forms-subtext-color;
    margin-top: density.$clr-base-gap-xs;

    &.error {
      color: forms-variables.$clr-forms-invalid-text-color;
    }

    &.success {
      color: forms-variables.$clr-forms-valid-text-color;
    }
  }

  .clr-subtext-wrapper {
    flex-basis: 100%;
    display: flex;
    align-items: flex-start;
  }

  .clr-validate-icon {
    @include mixins.min-equilateral(forms-variables.$clr-forms-icon-size);
    color: forms-variables.$clr-forms-invalid-color;
    fill: forms-variables.$clr-forms-invalid-color;
    display: none;
  }

  .clr-success {
    .clr-validate-icon {
      display: inline-block;
      color: forms-variables.$clr-forms-valid-color;
      fill: forms-variables.$clr-forms-valid-color;
    }
  }

  .clr-error {
    .clr-validate-icon {
      display: inline-block;
    }
  }

  .clr-form-horizontal {
    .clr-form-control > .clr-control-label,
    .clr-form-control > .clr-form-control.clr-form-control-multi .clr-control-label {
      width: calc(32 * #{forms-variables.$clr-forms-baseline});
      flex-shrink: 0;
    }
    &.clr-row .clr-control-label {
      width: auto;
    }

    .clr-form-control {
      display: flex;
      flex-direction: row;
    }
  }

  .clr-form:not(.clr-form-compact) .clr-control-container {
    &.clr-error,
    &.clr-success {
      & > .clr-subtext-wrapper .clr-validate-icon {
        margin-left: calc(-1 * #{density.$clr-base-horizontal-offset-xs});
      }
    }
  }

  .clr-form-compact {
    .clr-form-control > .clr-control-label {
      width: calc(32 * #{forms-variables.$clr-forms-baseline});
      min-width: calc(32 * #{forms-variables.$clr-forms-baseline});
    }

    .clr-form-control.clr-row > .clr-control-label {
      width: auto;
      min-width: auto;
    }

    .clr-form-control {
      display: flex;
      flex-direction: row;
      margin-top: density.$clr-base-vertical-offset-l;
    }

    .clr-control-container {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      align-items: center;
    }

    .clr-subtext {
      display: inline-block;
      align-self: flex-start;
      padding: density.$clr-base-vertical-offset-xs 0;
      margin-top: 0;

      // special margin left based on --clr-forms-icon-size
      // to align subtexts when error/success icon is missing.
      margin-left: forms-variables.$clr-forms-icon-size;
    }

    .clr-error,
    .clr-success {
      .clr-subtext {
        margin-left: density.$clr-base-gap-xs;
      }

      // Center the validation icon
      .clr-validate-icon {
        margin-left: 0;
      }
    }

    .clr-subtext-wrapper {
      flex-basis: auto;
    }
  }
}