.ik-input-wrapper {
    position: relative;
}

.ik-input__append,
.ik-input__prepend {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    bottom: 0;
    line-height: 24px;
    width: 32px;
    padding: 4px 8px;
    color: var(--on-background-color-3);
}

.ik-input__prepend {
    left: 0;
}

.ik-input__append {
    right: 0;
}

.ik-input-wrapper--prepend > .ik-input {
    padding-left: 32px !important;
}

.ik-input-wrapper--append > .ik-input {
    padding-right: 32px !important;
}

.ik-input-wrapper:focus-within > .ik-input__prepend,
.ik-input-wrapper:focus-within > .ik-input__append {
    color: var(--primary-color);
}

.ik-input-wrapper--disabled > .ik-input__prepend,
.ik-input-wrapper--disabled > .ik-input__append {
    opacity: 0.65;
    pointer-events: none;
}