// ********************************************
// container definition
$el-container: #{$prefix}-form-item;
$el-container-error: #{$el-container}--error;
$el-container-disabled: #{$el-container}--disabled;
$el-container-read-only: #{$el-container}--readonly;
$el-container-fit-content: #{$el-container}--fit-content;
$el-container-with-highlight: #{$el-container}--with-highlight;
$input-controller: #{$prefix}-input;
$el-container-left-label: #{$el-container}--with-left-label;

$checkbox-group: #{$prefix}-checkbox-group;
$checkbox-group-element: #{$prefix}-form-element-checkbox;

// ********************************************
// elements
$el-feedback: #{$el-container}__feedback;

.#{$el-container} {
  margin-bottom: space(xs);
  position: relative;
  z-index: 0;
  width: 100%;

  .#{$input-controller} {
    width: 100%;
    min-width: 0;
  }
}

fieldset.#{$el-container}-content {
  display: block;
  margin-inline-start: unset;
  margin-inline-end: unset;
  padding-block-start: unset;
  padding-inline-start: unset;
  padding-inline-end: unset;
  padding-block-end: unset;
  min-inline-size: unset;
  border-width: unset;
  border-style: unset;
  border-color: unset;
  border-image: unset;
  padding: unset;
}

.#{$el-container-left-label} {
  .#{$el-container}-content {
    display: flex;
    flex-direction: row;
    width: 100%;
  }
  label {
    padding-right: space(xxs);
    display: inline-flex;
    align-items: center;
  }
  .#{$el-container}__feedback {
    display: flex;
    margin-left: auto;
    width: 80%;
    justify-content: flex-end;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.#{$el-container-fit-content} {
  width: fit-content;
}

.#{$el-container-with-highlight} {
  $separation: 8;

  &::after {
    position: absolute;
    content: '';
    left: -#{$separation}px;
    top: -#{$separation / 2}px;
    z-index: -1;
    width: calc(100% + #{$separation * 2}px);
    height: calc(100% + #{$separation}px);
    background-color: #fefbee;
    border: 1px solid #8f6326;
    border-radius: 4px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.35);
  }
  &:hover,
  &:focus-within {
    &::after {
      position: absolute;
      content: '';
      left: -#{$separation}px;
      top: -#{$separation / 2}px;
      z-index: -1;
      width: calc(100% + #{$separation * 2}px);
      height: calc(100% + #{$separation}px);
      background-color: #fff9d3;
      border: 2px solid #8f6326;
      border-radius: 4px;
      box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3);
    }
  }
}

.#{$el-feedback} {
  @include body-micro-text-style;
  color: color(neutral, 500);
  text-align: right;
  display: block;
  font-style: italic;
  line-height: 15px;
}

.#{$el-container-error} {
  .#{$el-feedback} {
    text-align: right;
    color: #c64252;
  }
  .#{$el-feedback}--helper {
    display: none;
  }
}

// Mobile
@include md {
  .#{$el-feedback} {
    font-size: toMobile(font-size(400));
  }
}