/// ----------------------------------------------------------------------

/// Field

/// ----------------------------------------------------------------------

@use '@lavalogic/scss-lib' as lib;
@use 'spacing';
@use 'borders';
@use 'corners';
@use 'colours';

/// -------------------
/// Field config
/// -------------------

$padding-x: spacing.$md !default;
$padding-y: spacing.$md !default;
$icn-offset: 2rem !default;

/// -------------------
/// Field swatches
/// -------------------

.field {
  position: relative;
  align-items: center;
  margin: spacing.$md 0;

  &--bool {
    display: flex;
    border: borders.$ui-three;
    border-radius: corners.$base;
    background: colours.$ui-white;
  }
}

/// -------------------
/// Field label
/// -------------------

.field__label {
  flex: 1;

  .field--bool & {
    padding: 0 spacing.$md;
  }
}

/// -------------------
/// Field bool wrap
/// -------------------

.field__bool-wrap {
  display: inline-block;
  padding: 0.6875rem 0.75rem;
  background-color: colours.$ui-one;
  border-radius: corners.$base 0 0 corners.$base;
  border-right: borders.$ui-three;
}

/// -------------------
/// Field input
/// -------------------

.field__input {
  .field:not(.field--bool) & {
  //   width: calc(100% - #{$icn-offset});
    width: 100%;
  }

  .field--error & {
    border-color: colours.$state-error;
    background-color: colours.$state-error--alt;
    color: colours.$state-error;
  }

  .field--warning & {
    border-color: colours.$state-warning;
    background-color: colours.$state-warning--alt;
    color: colours.$state-warning;
  }

  .field--success & {
    border-color: colours.$state-success;
    background-color: colours.$state-success--alt;
    color: colours.$state-success;
  }

  .field--info & {
    border-color: colours.$state-info;
    background-color: colours.$state-info--alt;
    color: colours.$state-info;
  }
}

/// -------------------
/// Validation icon
/// -------------------

.field__icn {
  vertical-align: middle;
  margin-left: spacing.$md;
}

/// -------------------
/// Validation message
/// -------------------

.field__msg {
  text-align: right;
  padding-right: $icn-offset;

  .field--error & {
    color: colours.$state-error;
  }

  .field--warning & {
    color: colours.$state-warning;
  }

  .field--success & {
    color: colours.$state-success;
  }
}

.multi-field-left {

  label {
    white-space: nowrap;
    overflow: hidden;
  }

  input {
    border-radius: corners.$base 0 0 corners.$base;
    border-right: 1px solid transparent;
  }
}

.multi-field-right {

  label {
    white-space: nowrap;
    overflow: hidden;
  }
  
  input {
    border-radius: 0 corners.$base corners.$base 0;
  }
}