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

/// FieldBlock

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

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

/// -------------------
/// FieldBlock config
/// -------------------

$padding-x: spacing.$md !default;
$padding-y: spacing.$md !default;

/// -------------------
/// FieldBlock selectors
/// -------------------

.fieldblock {

  >.fieldblock--line, >label ~ .fieldblock--line {

    &:first-of-type {

      .block__label {
        border-radius: 3px 0 0 0;

        ~ .block__input {
          border-radius: 0px 3px 0 0;
        }
      }

      .block__input {
        border-radius: 3px 3px 0 0;
        
        .select__input {
          border-radius: 3px 3px 0 0;
        }

        label ~ .select__input {
          border-radius: 0 3px 0 0;
        }
      }
    }

    &:last-child {

      .block__label {
        border-radius: 0 0 0 3px;
        border-bottom: borders.$ui-three;
      }

      .block__input {
        border-radius: 0 0 3px 0;
        border-bottom: borders.$ui-three;
        
        .select__input {
          border-radius: 0 0 3px 0;
        }
  
        &.input {
        
          &:focus {
            @include states.focus;
          }
        }
      }
    }
  }
}

.fieldblock--line {
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
}

.block__label {
  display: inline-flex;
  align-items: center;
  padding: spacing.$xs spacing.$sm;
  background: #EAEEF3;
  flex-basis: 30%;
  border-top: borders.$ui-three;
  border-left: borders.$ui-three;
  
}

.block__input {
  background: #fff;
  flex-grow: 1;
  
  &.input, .select__input {
    border-radius: 0;
    border-bottom: 1px solid transparent;
    
    &:focus {
      @include states.focus;
    }
  }
}