@use '../../sass/abstracts/variables' as *;

#{$component-prefix}form-element-group {
  position: relative;

  &__prepend,
  &__append {
    width: 3rem;
    text-align: center;
    font-size: 20px;
    position: absolute !important;
    z-index: 2;
    height: 100%;
    line-height: 100%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: $sodra-black;
    top: 0;
    border: 1px solid transparent;
  }

  &__append {
    right: 0;
  }

  &--prepend {
    #{$object-prefix}select,
    #{$object-prefix}select-list__trigger,
    #{$object-prefix}text-input,
    #{$object-prefix}input-field {
      padding-left: 2.75rem !important;
      width: 100%;
    }
  }

  &--append {
    #{$object-prefix}select,
    #{$object-prefix}select-list__trigger,
    #{$object-prefix}text-input,
    #{$object-prefix}input-field {
      padding-right: 2.75rem !important;
      width: 100%;
    }
  }

  &--small &__prepend,
  &--small &__append {
    width: 2.5rem;
  }
}