/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
@import "../style/index";

@mixin uicore-inputs-labeled-input {

  display:                    block;
  padding:                    0;
  margin:                     0 0 $uicore-unbordered-padding;
  text-align:                 left;
  font-size:                  $uicore-font-size;
  font-weight:                $uicore-font-weight-normal;
  cursor:                     pointer;

  > .uicore-label {

    padding:                0;
    margin:                 0;
    border:                 0 none transparent;
    display:                block;
    font-size:              $uicore-font-size;
    font-weight:            $uicore-font-weight-semibold;
    line-height:            $uicore-line-height;
    text-align:             left;
    color:                  $buic-text-color;
  }

  > .input {

    position:               relative;
    /// Needed to vertically align the icon:
    display:                inline-block;
    width:                  100%;

    &.with-icon {

      > input,
      > .bwx-inputs-input {

        padding-right:  $uicore-bordered-padding + $uicore-line-height;
        margin-right: $uicore-bordered-padding + $uicore-line-height;
      }
    }

    > .icon {

      display:            flex;
      align-items:        center;
      position:           absolute;
      right:              0;
      top:                0;
      bottom:             0;
      padding:            $uicore-bordered-padding;

      font-size:          $uicore-font-size;
      font-weight:        normal;
    }
  }

  > .uicore-message {

    display:                block;
    font-size:              $uicore-font-size-small;
    line-height:            $uicore-line-height;
    color:                  $buic-text-color-muted;
  }


  /// Status colors ----------------------------------------------------------

  $status-colors: (
    success:    $buic-foreground-success,
    warning:    $buic-foreground-warning,
    error:      $buic-foreground-alert
  );

  @each $status, $color in $status-colors {

    &.#{$status},
    &.#{$status} > .uicore-message {

      color:              $color;
    }

    &.#{$status} > .input {
      > input,
      > .uicore-inputs-input {

        border-color:       $color;
        box-shadow:         $buic-inputs-boxshadow 0px 1px 1px inset;

        &:focus {

          border-color:   $color;
          box-shadow:     $buic-focus-boxshadow-gradient1 0px 1px 1px inset, rgba( $color, 0.15 ) 0px 0px 0px 2px;
        }
      }
    }
  }
}