.better-input {
    display: flex;
    flex-direction: column;
    gap: 4px;

    position: relative;

    &:has(.better-input-action-button) input {
        padding-right: 40px; /* Adjust based on button width */
    }

    &:has(.better-input-icon) input {
        padding-left: calc(16px + 20px + 16px); /* 16px left padding + 20px icon width + 16px gap between icon and text */
    }
}

.better-input-max-length-indicator {
    align-self: flex-end;
}

.better-input-action-button {
    position: absolute;
    right: 0;
}

.better-input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
}